CSS是用来设置网页中元素的样式。
1、设置元素样式的方式
（1）内联样式。在标签内部通过设置style属性来设置元素样式。（不推荐使用。）
<h1 style="color:yellowgreen;font-size:30px;">前端css演示</h1>（2）内部样式表。将样式编写到head下的style标签中。可以在当前网页对编写的样式复用。
<head>
<style>
h2{
color: blue;
font-size: larger;
}
</style>
</head>
<body>
<h2>前端css演示</h2>
</body>（3）外部样式表。将css样式编写到一个外部的css文件中，通过link标签将外部css文件引入当前页面。将样式编写到外部css文件，可以使用浏览器的缓存机制。（开发中推荐使用）
style.css文件
h2{
color: chartreuse;
font-size: small;
}
html文件
<head>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<h2>前端css演示</h2>
</body>2、CSS语法规范
选择器+声明块（多个声明组成，每个声明是样式名与样式值成对的结构）
选择器介绍：
常用选择器：
（1）元素选择器，根据标签名来选中指定的元素。标签名{}
（2）id选择器（id的值必须唯一，不能重复），根据元素的id属性值选中一个元素。#id属性值{}
（3）类选择器（class的值可以相同），根据元素的class属性选中一组元素，可以给同一个元素设置多个class属性。 .class属性值{}
（4）通配选择器，选中页面中的所有元素。 *{}
复合选择器：
（1）交集选择器，选中同时复合多个条件的元素。选择器1选择器2....选择器n{}
（2）并集选择器，同时选择多个选择器对应的元素。选择器1，选择器2，....选择器n{}
关系选择器：
（1）子元素选择器，选中指定父元素的指定子元素。父元素>子元素
（2）后代元素选择器，选中指定元素内的指定后代元素。祖先 后代
（3）选择下一个兄弟（紧挨着的）。前一个+下一个
（4）选择下边所有的兄弟。兄~（波浪线）弟
属性选择器：
（1）[属性名] 选择含有指定属性的元素
（2）[属性名=属性值]选择含有指定属性和属性值的元素
（3）[属性名^=属性值]选择属性值以指定值开头的元素
（4）[属性名$=属性值]选择属性值以指定值结尾的元素
（5）[属性名*=属性值]选择属性值中含有某值的元素
伪选择器：以：开头
根据所有的子元素排序
（1）:first-child 第一个子元素
（2）:last-child最后一个子元素
（3）:nth-child()选中第n个子元素。n:0-正无穷；2n或even:偶数；2n+1或odd：奇数
在同类型元素中排序
（1）:first-of-type
（2）:last-of-type
（3）:nth-of-type()
（4）:not()否定伪类，将符合条件的元素从选择器中去除。
超链接a标签的伪类：
a:link 表示没有访问过的链接
a:visited 表示访问过的链接
下面两个可以应用于其他标签
a:hover 表示鼠标移入的状态
a:active 表示鼠标点击
<head>
<style>
a:visited{
color:coral
}
a:link{
color:crimson;
}
a:hover{
color: chartreuse;
}
a:active{
color: blue;
}
</style>
</head>
<body>
<a href="https://www.qq">超链接1</a>
<a href="https://www.qq">超链接2</a>
</body>伪元素：
页面中的一些特殊位置。以::开头
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示选中的内容
::before 元素的开始，结合content属性使用
::after 元素的最后，结合content属性使用
<head>
<style>
h2::before{
content: "start";
color:brown;
}
h2::after{
content: "end";
color:yellowgreen;
}
</style>
</head>
<body>
<h2>前端css演示</h2>
<h2>前端css演示</h2>
</body>上述代码运行结果：
更多推荐
CSS菜鸟学习笔记1-选择器的简单介绍
发布评论