网页设计基础——CSS常用语法

 

 

 

一、注释；

例如：

/* 在此处书写注释 */

 

 

二、清除浏览器默认设置；

例如：

*{						/* 全局声明 */

    margin: 0;

    padding: 0;

}

 

 

三、CSS选择器；

 

1.标记选择器

<html>

	<head>

		<style>

    		p{

                font-size: 30px;

            }

		</style>

	</head>

	<body>

		<p>标记选择器</p>

	</body>

</html>

 

2.类别选择器

<html>

	<head>

        <style>

            .m{

                font-size=30px;

            }

        </style>

    </head>

    <body>

        <p class="m">类别选择器</p>

    </body>

</html>

 

3.ID选择器

<html>

	<head>

        <style>

            #m{

                font-size=30px;

            }

        </style>

    </head>

    <body>

        <p id="m">类别选择器</p>

    </body>

</html>

 

4.集体声明

<html>

	<head>

        <style>

            h1, #m{

                font-size=30px;

            }

        </style>

    </head>

    <body>

        <h1>一级标题</h1>

        <p id="m">类别选择器</p>

    </body>

</html>

 

5.后代选择器

规则：

  1. 用来选择元素或元素组的所有后代元素。

 

例如：

<html>

	<head>

        <style>

			ul{color:#00FFFF;}

			ul li{color:#FF0000;}			/* 所有li标签内的文本颜色都为红色 */

        </style>

    </head>

    <body>

        <ul>蓝色<li>红色</li>红色</ul>

        <ul>蓝色<ol>蓝色<li>红色</li>蓝色</ol>蓝色</ul>

    </body>

</html>

 

6.子元素选择器

规则：

  1. 与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
  2. 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器

 

例如：

<html>

	<head>

        <style>

			ul{color:#00FFFF;}

			ul>li{color:#FF0000;}			/* 第二个ul标签里“li标签内的文本颜色”不为红色 */

        </style>

    </head>

    <body>

        <ul>蓝色<li>红色</li>红色</ul>

        <ul>蓝色<ol>蓝色<li>蓝色</li>蓝色</ol>蓝色</ul>

    </body>

</html>

 

7.伪类选择器

规则

  1. 鼠标选中元素的各种状态。

 

例如：

<html>

	<head>

		<style>

			a:link {color: black;}				/* 访问之前的情况 */

			a:visited {color: green;} 			/* 访问过的情况 */

			a:hover {color: red;}				/* 鼠标悬停 */

			a:active {color: gray;}				/* 鼠标按下，尚未放开的情况 */

		</style>

	</head>

	<body>

		<a href="#">这是一个链接</a>

	</bpdy>

<html>

 

 

四、字体样式；

 

1.字体类型

规则：

  1. 若和下面的代码一样同时声明多个字体名称，则浏览器会先寻找“楷体”，若没找到则会继续寻找“宋体”，若代码所声明的所有字体都没有找到，则使用浏览器默认字体显示。

 

例如：

font-family: "楷体", "宋体";

 

2.字体大小

font-size: 8px;

 

3.字体粗细

font-weight: 800;

 

4.字体颜色

color: #FF0000;			/* 红色 */

color: #000000;			/* 黑色 */

color: #FFFFFF;			/* 白色 */

color: #0000FF;  		/* 蓝色 */

color: #FFFF00; 		/* 黄色 */

 

5.文字对齐

text-align: center;				/* 居中对齐 */

text-align: left;				/* 靠左对齐 */

text-align: right;				/* 靠右对齐 */

 

6.字体样式

font-style: italic;					/* 斜体 */

text-decoration: underline;			/* 下划线 */

text-decoration: overline;			/* 上划线 */

text-decoration: line-through;		/* 删除线 */

 

7.英文字母大小写

text-transform: capitalize;			/* 单词首字母大写 */

text-transform: uppercase;			/* 全部字母大写 */

text-transform: lowercase;			/* 全部字母小写 */

 

 

五、背景；

 

1.背景颜色

background-color: #FF0000;

 

2.背景图片

background-image: url(xxx.jpg);

 

3.背景图片大小

background-size: 500px 200px;		/* 宽度 高度 */

 

4.背景图片平铺

background-repeat: repeat;		/* 平铺 */

background-repeat: no-repeat;	/* 不平铺 */

background-repeat: repeat-x;	/* 水平平铺 */

background-repeat: repeat-y;	/* 垂直平铺 */

 

5.背景图片位置

background-position: center center;		/* 居中 */

background-position: 50% 50%;			/* 居中 */

background-position: 200px 100px;		/* 平面直角坐标系 */

《网页设计基础——CSS常用语法》的更多相关文章

  1. 简单物联网：外网访问内网路由器下树莓派Flask服务器

    最近做一个小东西,大概过程就是想在教室,宿舍控制实验室的一些设备. 已经在树莓上搭了一个轻量的flask服务器,在实验室的路由器下,任何设备都是可以访问的:但是有一些限制条件,比如我想在宿舍控制我种花 ...

  2. 利用ssh反向代理以及autossh实现从外网连接内网服务器

    前言 最近遇到这样一个问题,我在实验室架设了一台服务器,给师弟或者小伙伴练习Linux用,然后平时在实验室这边直接连接是没有问题的,都是内网嘛.但是回到宿舍问题出来了,使用校园网的童鞋还是能连接上,使 ...

  3. 外网访问内网Docker容器

    外网访问内网Docker容器 本地安装了Docker容器,只能在局域网内访问,怎样从外网也能访问本地Docker容器? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Docker容器 ...

  4. 外网访问内网SpringBoot

    外网访问内网SpringBoot 本地安装了SpringBoot,只能在局域网内访问,怎样从外网也能访问本地SpringBoot? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装Java 1 ...

  5. 外网访问内网Elasticsearch WEB

    外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...

  6. 怎样从外网访问内网Rails

    外网访问内网Rails 本地安装了Rails,只能在局域网内访问,怎样从外网也能访问本地Rails? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Rails 默认安装的Rails端口 ...

  7. 怎样从外网访问内网Memcached数据库

    外网访问内网Memcached数据库 本地安装了Memcached数据库,只能在局域网内访问,怎样从外网也能访问本地Memcached数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装 ...

  8. 怎样从外网访问内网CouchDB数据库

    外网访问内网CouchDB数据库 本地安装了CouchDB数据库,只能在局域网内访问,怎样从外网也能访问本地CouchDB数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动Cou ...

  9. 怎样从外网访问内网DB2数据库

    外网访问内网DB2数据库 本地安装了DB2数据库,只能在局域网内访问,怎样从外网也能访问本地DB2数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动DB2数据库 默认安装的DB2 ...

  10. 怎样从外网访问内网OpenLDAP数据库

    外网访问内网OpenLDAP数据库 本地安装了OpenLDAP数据库,只能在局域网内访问,怎样从外网也能访问本地OpenLDAP数据库? 本文将介绍具体的实现步骤. 1. 准备工作 1.1 安装并启动 ...

随机推荐

  1. sql server2016 数据库日志 清空语句

    /*1.查询数据库日志文件名称*/--TC_MES_DEV为数据库名--这里的 数据库日志名,可以用以下注释的语句进行查询(_log那个)USE [TC_MES_DEV]GOSELECT file_i ...

  2. NC20241 [SCOI2005]扫雷MINE

    NC20241 [SCOI2005]扫雷MINE 题目 题目描述 相信大家都玩过扫雷的游戏.那是在一个 \(n \times m\) 的矩阵里面有一些雷,要你根据一些信息找出雷来. 万圣节到了 ,&q ...

  3. OneOS家族，LITE版小兄弟诞生了！

    号外,号外!OneOS-Lite诞生啦!前有大哥OneOS,以及一众优秀的RTOS,正所谓珠玉在前,我很难啊.但我可不能怂,大哥叫小O,我就叫小L,站在大哥的肩上,小小L也有发光发热的机会. 小L代码 ...

  4. Code Runner for VS Code，下载量突破 4000 万！支持超过50种语言

    大家好! 我是韩老师.还记得 6 年前的夏天,我在巨硬写着世界上最好的语言,有时也需要带着游标卡尺写着另一门语言.然而,我对这两门语言都不熟悉,如果能在 VS Code 中方便快捷地运行各种语言,那岂 ...

  5. HtmlAgilityPack中使用xpath获取属性值

    HtmlAgilityPack介绍 HtmlAgilityPack是一个专门用来解析Html的库,它可以使用xml的方式来解析html. 有人说了,html本身不就是xml?是的,html就是xml, ...

  6. C++ 内存模型 write_x_read_y 试例构造

    之前一段时间偶然在 B 站上刷到了南京大学蒋炎岩(jyy)老师在直播操作系统网课.点进直播间看了一下发现这个老师实力非凡,上课从不照本宣科,而且旁征博引又不吝于亲自动手演示,于是点了关注.后来开始看其 ...

  7. PHP生成器yield使用示例

    <?php function getLines($file) { $f = fopen($file, 'r'); try { while ($line = fgets($f)) { yield ...

  8. linux 判断变量是否相等方法

    echo $? 输出上一个命令执行成功与否的情况 1表示失败 0 表示成功 test检测文件类型和比较值 有空格时等号才是判断,否则为赋值

  9. 使用Python3.7配合协同过滤算法(base on user,基于人)构建一套简单的精准推荐系统（个性化推荐）

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_136 时至2020年,个性化推荐可谓风生水起,Youtube,Netflix,甚至于Pornhub,这些在互联网上叱咤风云的流媒体 ...

  10. Java学习 (四)基础篇 Java基础语法

    注释&标识符&关键字 注释 注释并不会被执行,其主要目的用于解释当前代码 书写注释是一个非常好的习惯,大厂要求之一 public class hello { public static ...