CSS3语法

最新推荐文章于 2024-01-20 22:42:41 发布

静_步

最新推荐文章于 2024-01-20 22:42:41 发布

阅读量1.5k

点赞数 1

分类专栏： 4、Web前端基础文章标签： css

本文链接：https://blog.csdn.net/qq_43785075/article/details/111072117

版权

4、Web前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS是纯文本格式文件

1.CSS3的语法基础

1.1构造CSS样式规则

1.CSS3的基本语法规则

CSS样式由两部分组成：选择器(selector)和声明块(declaration block)，其中选择器和声明块之间可用空格隔开，声明块被一对大括号括起来，花括号之间可以添加一个或多个声明。

Selector {Declaration1;Declaration2;Declaration3;....;DeclarationN;}

多个声明需要用分号隔开，每个声明由属性和属性值组成，属性是希望设置的样式属性。每个属性都有一个值，属性和属性值之间用冒号隔开。

选择器 {属性1：属性值1;属性2：属性值2;属性3：属性值3;.......}

例：

h1 {color:red;font-size:14px;}

2.属性值的不同写法和单位

在书写属性值时，有不同的单位和写法，例如表示颜色的属性值通常就有三种，第一种是使用英文单词表示，第二种是使用十六进制的颜色值表示，第三种是使用RGB函数表示。

/*使用英文单词表示*/
p{color:red;}
/*使用十六进制的颜色值表示*/
p{color:##ff0000;}
/*使用RGB函数表示*/
p{color:rgb(255,0,0);}
p{color:rgb(100%,0%,0%)}

当使用RGB百分比时，即使当值为0时也要写百分比符号。

3.属性值加引号

如果属性值为多个单词则要给该属性值加引号

p{font-family:"sans serif"}

4.多重声明中的分号

如果要定义不止一个声明，则需要`用分号将每个声明分开。应当在每行只描述一个属性，这样可以增强样式定义的可读性。

p{
	text-align:center;
	color:black;
	font-family:arial;
	}

5.多重声明中的空格和大小写

空格不会影响CSS在浏览器的工作效果，CSS对大小写不敏感。特例：class和id的名称对大小写敏感。

1.2为样式规则添加注释

CSS的注释以/*开头，以*/结尾。

/*注释部分*/

2.CSS选择器

2.1通用选择器

在进行网页设计时，可以通过通用选择器设置网页中所有的HTML标签使用同一种样式，它对所有的HTML元素起作用。

*{属性：属性值}

2.2标签选择器

HTML文档是由多个不同标签组成的，标签选择器可以用来控制这些标签的应用样式。

标签名{属性：属性值}

2.3类选择器

.类名{属性：属性值;}

类名由HTML标签中的标签属性class决定。类名可以由英文字母，数字，下划线组成，且以英文字母开头，应该做到见名知意。一个类选择器可以在一个HTML文档中使用多次。

2.4id选择器

#id名称{属性：属性值;}

id名称由HTML标签中的标签属性id决定。id名称可以由英文字母，数字，下划线组成，且以英文字母开头，应该做到见名知意。一个id选择器只可以在一个HTML文档中使用一次。

2.5伪类选择器

CSS伪类用于向某些选择器添加特殊的效果。由于不同浏览器支持的效果不同，在此只说明超链接的伪类。包括:link,:visited,:hover,:active.

伪类	效果
:link	超链接热点在没有被点击时的样式
:visited	超链接热点在已经被访问时的样式
:hover	鼠标悬停在超链接热点上面的样式
:active	超链接热点被激活瞬间的样式

a:hover必须放在a:link和a:visited之后才是有效的；a：active必须放在a:hover之后才是有效的。

2.6群组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号隔开。

元素1，元素2，元素3{
	声明1;
	声明2;
}

2.7派生选择器

通过依据元素在其位置的上下文关系来定义样式，可以使标签更加简洁。在派生选择器中，每一个选择器对象之间使用空格作为分隔符，除了可以派生一级后代，也可以派生多级后代。

li strong{
	font-size:italic;
	font-weight:normal;
}

2.8属性选择器

属性选择器可以为指定属性的HTML元素设置样式，而不限于class和id属性。只有在规定了!DOCTYPE时，IE7及以上版本的浏览器才支持属性选择器。
属性选择器之中的属性和属性值需要用"[]"方括号包含起来。

1.属性选择器

[title]
{
	color:red;
}

2.属性和值选择器

[title=W3CSchool]
{
	color:red;
}

3.属性和值选择器：多个值

由空格分隔的多个属性值情况：

[title~=CSS3]{
	color:red;
}

由连字符分隔的多个属性值的情况：

[lang|=en]{
	color:red;
}

4.属性选择器设置表单的样式

input[type="text"]{
	width:150px;
	display:block;
	margin_bottom:10px;
	background-color:yellow;
}

5.CSS属性选择器参考表

选择器	描述
[attribute]	选取带有指定属性的元素
[attribute=value]	选取带有指定属性和值的元素
[attribute~=value]	选取属性中包含指定词汇的元素
[attribute\|=value]	选取带有以指定开头的属性值的元素，该值必须是整个单词
[attribute^=value]	匹配属性值以指定值开头的每个元素
[attribute$=value]	匹配属性值以指定值结尾的每个元素
[attribute*=value]	匹配属性值中包含指定值的每个元素

2.9组合选择器

在CSS3中包含了四种组合方式：后代选择器（以空格分隔）、子元素选择器（以大于号分隔）、相邻兄弟选择器（以加号分隔）、普通兄弟选择器（以波浪号分隔）。

1.后代选择器

与派生选择器相同

2.子元素选择器

子元素选择器只能选择作为某元素子元素的元素，该元素与其子元素之间以大于号">"分隔。

div>p{
	background-color:yellow;
}

3.相邻兄弟选择器（元素1后的第一个元素2）

相邻兄弟选择器可选择紧接在另一元素后的元素，且两者之间有相同的父元素。该元素与相邻兄弟元素之间以"+"分隔。
选取所有位于div元素后的第一个p元素：

div+p{
	background-color:yellow;
}

4.普通相邻兄弟选择器（元素1后的所有元素2，在同一级）

普通相邻兄弟选择器选择所有指定元素的相邻兄弟元素。该元素与其相邻兄弟元素之间以破折号“~”分隔。
选取所有div元素的所有相邻兄弟p元素：

div~p{
	background-color:yellow;
}

3.在网页中应用CSS的四种方法

内联CSS样式、嵌入CSS样式、链接外部CSS样式表、导入外部CSS样式表

3.1内联CSS样式表

直接在HTML标签中使用style属性，该属性的内容就是CSS的属性和值。

<p style="font-family:黑体;font-size:20">内联样式</p>

3.2嵌入CSS样式

将CSS代码添加到HTML文档的<head>与</head>标签之间，并且用<style>与</style>标签进行声明。

<head>
	<style type="text/css">
		h1{color:red}
		p{color:blue}
	</style>
</head>
<body>
	<h1>一级标题是红的></h1>
	<p>一段落文字是蓝的></p>
</body>

3.3链入外部CSS样式

链接外部样式表是指在网页外部定义CSS样式，并将其存为扩展名为.css的纯文本文件中。在需要使用外部样式表定义样式的网页中通过<link>标签将外部存放的CSS样式表文件链接到该页面中，而且<link>语句必须放在<head>与</head>标签之间。
<link>标签有三个属性要说明：第一个***rel属性***指定链接到CSS样式，其属性值为stylesheet;第二个***type属性***指定链接的文件类型为文本类型的CSS样式表，其属性值为text/css；第三个***href属性***指定该HTML文档所链接的外部样式表文件和它的之间相对路径。

<head>
	<link rel="stylesheet" type="text/css" href="CSS/mystyle.css" />
</head>

3.4导入外部CSS样式

采用导入的CSS样式，在HTML文档初始化时，会被导入到HTML文档内部作为文档的一部分。

<head>
<style type="text/css">
@import url("外部样式表相对路径");
</head>

4.CSS样式的特性

4.1CSS样式的继承性

特定的CSS属性向下传递给其子孙元素。

4.2CSS样式的特殊性

特殊性规定了不同的CSS规则的权重，当多个规则都应用在同一个元素时，权重越高的CSS样式会被优先采用。
根据CSS样式规范，标签选择器具有特殊性的权重为1，类选择器具有特殊性的权重为10，id选择器具有特殊性的权重为100，而***继承的属性，其特殊性的权重为0***，任何一条与CSS继承值冲突的属性值都会覆盖继承的权重。

4.3CSS样式的层叠性

层叠就是在HTML文件中对于同一个元素可以有多个CSS样式存在，当有相同特殊性权重的样式应用在同一个元素时，CSS规范会根据这些css样式的前后顺序来决定，位于最后面定义的CSS样式会被应用。在一般情况下，CSS样式优先级高低：内联样式表>内嵌样式表>外部样式表。

4.4CSS样式的重要性

在属性值后面加上！important，表示此优先级高于任何其它。

5.CSS3常用样式属性

5.1字体文本样式

1.设置网页中的字体样式

CSS字体属性定义了文本的字体系列、大小、加粗、风格、变形等属性。

属性	作用
font-family	字体系列，可定义多个字体
font-size	字体的尺寸
font-style	字体风格
font-variant	以小型大写字体或者正常字体显示文本
font-weight	字体的粗细

2.设置网页中的文本样式

CSS字体属性定义了文本的外观，可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本进行缩进。

属性	作用
color	文本字体的颜色
line-height	行间距
letter-spacing	字符之间的距离
word-spacing	单词之间的距离
text-align	对齐元素中的文本
text-indent	缩进元素中的文本
text-transform	设置文字的大小写
text-decoration-style	向文本添加修饰 solid实线、double双线、dotted点状线、dashed虚线、wavy波浪线
text-shadow	设置文本阴影
text-overflow	控制页面中溢出的文本内容 clip修剪文本，不显示溢出内容；ellipsis显示省略号，必须设置overflow:hidden

5.2背景样式

属性	作用
background-color	设置元素的背景颜色
background-image	把图像设置为背景
background-repeat	设置背景图像是否以及如何重复
background-attachment	对象的背景图像是随对象内容滚动还是固定的
background-position	设置对象背景图像的起始位置
background-origin	该属性相对于什么位置来定位
background-clip	设置对象的背景向外裁剪的区域
background-size	设置对象的背景图像的尺寸大小

5.3边框样式

属性	作用
border-width	设置边框的粗细宽度
border-style	设置边框的样式
border-color	设置边框的颜色
border-radius	设置边框的圆角
border-image	设置边框用图像来填充
border-shadow	设置边框一个或多个阴影

5.4列表样式

属性	作用
list-style-type	设置列表项标志的类型
list-style-image	将图像设置为列表项标志
list-style-position	设置列表中列表项标志的位置

静_步

关注

1
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
CSS3语法

CSS是纯文本格式文件1.CSS3的语法基础1.1构造CSS样式规则1.CSS3的基本语法规则 CSS样式由两部分组成：选择器(selector)和声明块(declaration block)，其中选择器和声明块之间可用空格隔开，声明块被一对大括号括起来，花括号之间可以添加一个或多个声明。Selector {Declaration1;Declaration2;Declaration3;....;DeclarationN;}多个声明需要用分号隔开，每个声明由属性和属性值组成，属性是希望设置的样式
复制链接

扫一扫

专栏目录