初识CSS

CSS

• HTML和CSS结构样式分离写法上HTML属性和属性值用”=“链接，CSS属性和属性值是”：“

CSS层叠样式表

• CSS写法一 style标签里面 内敛样式
• CSS写法二 style内部样式
• CSS写法三 外部样式表

<link rel="stylesheet" href="./class1.css">

CSS样式表优先级

• 就近原则
  相同样式优先级：
  • 当设置相同样式时，后面的优先级较高
  • 但不建议重复设置样式的情况
• 内部样式与外部样式
  • 内部样式与外部样式优先级相同，如果设置相同样式那么后写的优先级更高
• 单一样式优先级
  • style行间>id>class>tag>*>继承
  • 注：！important 强制优先

CSS中的冲突、层叠、继承

• 层叠
  同一个元素使用了不同的样式表，所有的样式叠加就叫做层叠
• 冲突
  同一个元素设置相同的属性会造成冲突，遵循就近原则选择属性值
• 继承
  在字符关系中，文本样式可以被继承，布局样式不可以被继承（块级元素可以继承父类的宽，行级不可以）

	<div style="width: 500px;height:400px;border:1px solid black;font-size: 30px;">
          <!-- color="red" size="7" face="宋体"  style="background-color: blue;" -->
        <font >文字标签</font>
    </div>

颜色 == color background-color==

• 英语字母
• 十六进制
• rgb(0-255,0-255,0-255)
• rgba(0-255,0-255,0-255,0-1)

CSS选择器

标签选择器

全局选择器 *

	*{
		margin:0;
		padding:0;
	}

class 选择器 .

	.q{background-color: aqua;}

id #

• id 是独一无二的

	#q{background-color: yellow;}

群组选择器 ，

	b,a{background-color: red;}

层次选择器

• 子代选择器 >

	 ul>li{color: red;}

• 后代选择器 空格
  去除无序列表的点

	.uu li{list-style: none;}

• 相邻兄弟 +

	.uu+a{background-color: blue;}

• 通用兄弟 ~

	.uu>li~a~p{background-color: chartreuse;}

• 伪类选择器
  ui 伪类选择器 a标签使用

1. 默认状态

	b+a:link{background-color: yellowgreen;}

2. 访问过后的状态

	b+a:visited{background-color: aqua;}

3. 鼠标悬浮

	b+a:hover{background-color: red;}

4. 鼠标按下

	b+a:active{background-color: orange;}

5. 结构伪类

	ul li:nth-child(3){background-color: orangered;}
    a:nth-child(4){background-color: gold;}
    ul p:nth-child(18){background-color: antiquewhite;}