css介绍
CSS(cascadingstylesheet )定义HTML元素的显示方式，并为HTML设置样式以提高外观。
当浏览器读取样式表时，它会根据该样式表格式化(呈现)文档。
css语法(下图) ) ) )。
每个CSS样式由两部分组成：选择器(标签名称)和声明(包括属性和属性值)，每个声明后以分号结束。
css注释的写法
/*这是评论*
css的导入方式
内联样式(将CSS样式设置为标记的样式属性。 ) )
光晕世界。
内部样式Title
background-color: #2b99ff；
}
外部样式(把css写在别的文件里，导入页面就可以了)常用1. #刚才写的这个. css文件和你的html在同一个目录下。 如果不是目录，请在href中写入此. css文件的路径
2.
@importurl ()./index.CSS )；
CSS选择器(找到相应的标签) ) )
基本选择器：
1 .标签选择器
2 .身份选择器
3 .类选择器
1 .标签选择器(可以选择所有标签元素，包括div、ul、li和p )。 无论标签隐藏得多深，都可以选择。 被选择的不是某一个而是全部。 ) )
body{
颜色：灰色；
字体大小： 12px；
}2.请勿在与id选择器(#检查id ) #相同的页面上重复id。
的任何选项卡都可以设置id
id命名规则可以在字母上加数字下划线。 严格区分大小写，以确保aa和aa是两个不同的属性值#box{
background:green；
}3.类选择器
类是指class . class与id非常相似的任何标签都可以进行类划分，但类是可重复的，属于分类的概念。 同一标签可以有多个类，并使用空格进行分隔
类的使用需要“公共类”的概念。
. big{
字体大小： 40px；
}
段落1
段落2
段落3
高级选择器
1 .后代选择器
2 .通用选择器
3 .子选择器
4 .并行集选择器
5 .交叉选择器
1 .后代选择器
使用空格表示后代选择器。 (包括儿子、孙子、重孙) )
2 .通用选择器(*为全部) ) )。
3 .子选择器
使用表示子代的选择器。 例如，divp仅表示当前div元素的选定子代(不包括孙子代.)的元素p
. containerp{
颜色：是绿色；
}
4 .并行选择器(boby或h1或p ) margin是外部距离
多个选择器之间用逗号隔开。 这是选定页面中的多个标签。 一些公共元素可以使用并行选择器
5 .交叉选择器(类选择器和id选择器。 #这是p标签过多，需要进一步区分)。
使用.表示交叉选择器。 第一个必需标记的标记选择器，第二个必需标记的类选择器语法：div.active (
这样的标签)
6 .属性选择器
根据标签的属性选择当前标签。
按属性搜索
[for]{
颜色：红色；
}
已发现等于for属性username的元素字体颜色设置为红色
[for='username']{
color :是；
}
以…开头的^[for^='user']{
颜色： # 008000；
}
以$结尾
[for$='vvip']{
颜色：红色；
}
包含元素的标签
[for*='vip']{
color:#00BFFF；
}
指定单词的属性
label[for~='user1']{
颜色：红色；
}
input[type='text']{
后台：红；
}
总结
/p>1.字类选择器(1,2,3经常使用)
用> #大于号
选择的是前一级标签的子标签2.后代选择器
用#空格
选择的是前一级标签的后代标签3.并集选择器
用,#逗号
选则所有符合条件的标签4.交集选择器
开头是标签名 后边跟id或类选择器#注意不要加空格,加空格就成后代选择器了
5.通用选择器(要清除网页自带的外边距时使用)*选择所有的标签6.属性选择器1.[属性名] 带这个属性名的标签2.[属性名="要匹配的属性值"] 带这个属性和属性值的标签3.[属性名^="属性值的开头"]4.[属性名$=属性值结尾的字符串5.[属性名*=属性值包含的字符
7.字类选择器
伪类选择器
伪类选择器一般用在超链接a标签中
遵循 LoVe HAte 爱恨准则
四种状态:
未被访问的 link
访问过的 visited
鼠标悬停的 hover
鼠标按下时 active
选择第一个孩子:
:first-child
选择最后一个:
last-child
选择指定的孩子:
nth-child(n)
p:first-letter :选择第一个字符
p:before 在标签前添加一个标签内容
p:after 在标签后添加有一个标签内容
根据标签的不同状态再进行进一步的区分，比如一个a标签，点击前，点击时，点击后有不同的三个状态。未访问的链接 颜色 .box ul li.item1 a:link {
color:#FF0000
}访问后的链接 颜色a:visited {
color:#00FF00
}鼠标移动到链接上a:hover {
color:#FF00FF
}选定的链接 (就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色)
a:active {
color:#0000FF
}input输入框获取焦点时样式input:focus {#input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
#outline: none;
background-color: #eee; #框里面的背景色
}
补充:css3的选择器nth-child()
/*选中第一个元素*/div ul li:first-child{
font-size: 20px;
color: red;
}/*选中最后一个元素*/div ul li:last-child{
font-size: 20px;
color: yellow;
}/*选中当前指定的元素 数值从1开始*/div ul li:nth-child(3){
font-size: 30px;
color: purple;
}/*n表示选中所有,这里面必须是n, 从0开始的 0的时候表示没有选中*/div ul li:nth-child(n){
font-size: 40px;
color: red;
}/*隔几换色 隔行换色
隔4换色 就是5n+1,隔3换色就是4n+1,(+1 是起始位置从第1个开始;4n 是每4个换色)
*/div ul li:nth-child(5n+1){
font-size: 50px;
color: red;
}
伪元素选择器
/*设置第一个首字母的样式*/p:first-letter{
color: red;
font-size: 30px;
}/* 在....之前 添加内容(了解)使用此伪元素选择器一定要结合content属性*/p:before{
content:'粗心的野狼';
}/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联(清除浮动)*/p:after{
content:'&';
color: red;
font-size: 40px;
}
CSS标签的继承性和层叠性
1.继承性:给父级设置一些属性,子级继承父级的该属性
#有些属性可以继承下来,color,font-,text-,line-* 主要是文本级的标签元素;但有一些盒子元素属性,定位的元素(浮动,绝对定位,固定定位)不能继承.
2.层叠性:权重大的标签覆盖掉了权重小的标签(就是被干掉)
#权重(涉及颜色的显示问题)的计算先是 id的数量 class的数量 标签的数量 ,顺序不能乱
介绍
子标签可以继承父标签的样式: color,font-,text-, line-层叠性
(选择器权重一样的时候)后边添加的样式会覆盖前边的样式
权重(永不进位.当标签里面明确写了颜色,其权重为1000)
id 权重100
类 权重10
标签 权重1
!important 权重无限大(都有!important的时候,比较权重)
权重相同的处理
第一种现象：当权重相同时，以后来设置的属性为准，前提一定要权重相同
第二种现象：第一个选择器没有选中内层标签，那么它是通过继承来设置的属性，那么它的权重为0。第二个选择器选中了内层标签，有权重.
第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。'就近原则'
/*1 0 0 */显示红色#box{
color: red;
}/*0 1 0*/.container{
color: yellow;
}/*0 0 1*/p{
color: purple;
}
https://www.cnblogs.com/ssdgk/p/10232480.html