CSS样式设计(一)

最新推荐文章于 2023-04-14 20:46:54 发布

舒翰

最新推荐文章于 2023-04-14 20:46:54 发布

阅读量1.6k

点赞数

分类专栏： web 文章标签： web css 样式

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css的样式规则

selector{property1: value1;property2: value2;…}
其中selector是一个CSS的选择器,property为一个CSS的属性；
例如：
(1).标签为div的字体为红色,字体为16px:
div{color: red;font-size: 16px}
(2).id值为div的字体为红色,字体为16px:
#div{color: red;font-size: 16px}
(3)class值为div的字体为红色,字体为16px:
.div{color: red;font-size: 16px}
在HTML文档中应用CSS
1.内联样式:通过HTML标签style属性来设置标签的样式，例：
```
<div style="color: red;font-size: 16px;">Hello World</div>
```
2.内嵌样式：在HTML5文档的head标签体中增加一个style标签，将CSS设置集中在style的标签体中定义，例：
```
<head>
	<style>
		div{
			color: red;
			font-size: 16px;
		}
	</style>
</head>
```
3.链接样式:将CSS样式定义在一个或多个以CSS为拓展名的外部样式文件中，使用link标签将外部样式表文件链接到HTML5页面中，这个在HTML5中是常见的样式应用，例：
```
<link href="divcss.css" rel="stylesheet" />
```
CSS选择器(重点)
1.标签选择器:标签选择器指的是用HTML的标签名作为选择器，所有标签名都可以作为标签选择器使用，它用于为页面中某一种标签指定统一的CSS样式，但这也是缺点，不能实现同一种标签所设计的差异化。
```
	div{color: red;font-size: 16px;}
```
2.id选择器:id选择器使用"#"进行标识，后面紧跟HTML标签的id属性值，一张页面中的HTML标签的id属性值是唯一的，所以这种选择器设计的样式只能针对HTML页面中某一个具体的标签。
```
	#divcss{color: red;font-size: 16px;}
	
	<div id="divcss">
		CSS挺简单的？
	</div>
```
3.类选择器:类选择器使用". "进行标识，后面紧跟HTML标签中的class属性值。它最大的优势是可以为具有相同class属性的HTML标签设置相同的样式。
```
	.classdiv{color: red;font-size: 16px;}	
	<div class="classdiv">class相同</div>
	<p class="classdiv">class相同</p>
```
4.限定式选择器:限定式选择器由两个选择器构成，其中第一个为标签选择器，第二个为类选择器或id选择器，中间是没有空格的。
```
div#divcss{....}    //为id属性为"divcss"的div标签设计样式
p.classdiv{....}     //为class属性为"classdiv"的p标签设计样式
```
5.后代选择器:后代选择器是用来选择HTML标签元素的后代的，其写法是把父标签的选择器写在前面，后代标签的选择器写在后面，两者之间有一个空格。

	div p{.....}    //为div标签中的p标签设计样式
	div #divcss{....}    //为div标签中的id属性为divcss的子标签设计样式
	p .classdiv{....}    //为p标签中class属性为classdiv的子标签设计样式

6.并集选择器:并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。如果某些选择器定义的样式完全或部分相同，就可以使用并集选择器为它们定义相同的CSS样式。

h1,p,div #divcss,.classdiv{....}    //h1,p标签,id属性为divcss的div标签,class属性为classdiv的标签

7.通配符选择器:通配符选择器用*号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的HTML标签元素。

8.其他选择器:对应特殊需求

选择器	例子	描述
element>element	div>p	选择父元素为div标签的p标签(p标签必须是div标签的直接子元素)
element>element	div+p	选择紧跟在div标签后面的p标签
element1～element2	p～ul	选择有相同的父元素中位于p元素之后的所有ul元素
[attribute]	input[name]	选择所有包含name属性的input标签
[attribute=value]	input[name=“jiang”]	选择name属性为"jiang"的input标签
[attribute^=value]	input[name^=“ji”]	选择name属性以"ji"开头的input标签
[attribute$=value]	input[name$=“g”]	选择name属性以"g"结尾的input标签
[attribute*=value]	input[name*=“jiang”]	选择name属性包含"jiang"的input标签
:link	a:link	选择所有未被访问的超链接
:visited	a:visited	选择所有已被访问的超链接
:active	a:active	选择所有活动链接
:hover	div:hover	选择鼠标悬停的div标签
:focus	input:focus	选择所有获取焦点的input标签
:first-letter	p:first-letter	选择p段落中的首字母
:first-line	p:first-line	选择p段落中的首行
:first-child	p:first-child	选择属于父元素的第一个子元素的p标签
:last-child	p:last-child	选择属于父元素的最后一个子元素的p标签
:before	p:before{content: “测试” ;}	在每个p标签的内容之前插入文字“测试”
:after	p:after{content: “测试” ;}	在每个p标签的内容之后插入文字“测试”
:first-of-type	div p:first-of-type	选择div标签中的第一个p标签
:last-of-type	div p:last-of-type	选择div标签中的最后一个p标签
:nth-child(n)	li:nth-child(2)	选择属于其父元素的第二个li标签
:nth-last-child(n)	li:nth-last-child(2)	选择属于其父元素的倒数第二个li标签
:empty	div:empty	选择没有子元素的div标签
:not	li:not(:last-child)	选择除去最后一个li元素的其他所有li标签

舒翰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS样式设计(一)

css的样式规则selector{property1: value1;property2: value2;…}其中selector是一个CSS的选择器,property为一个CSS的属性；例如：(1).标签为div的字体为红色,字体为16px:div{color: red;font-size: 16px}(2).id值为div的字体为红色,字体为16px:#div{color: ...
复制链接

扫一扫

专栏目录