CSS 基础

CSS 基础

CSS是层叠样式表，样式表修饰文字。HTML和CSS是结构样式分离，写法在HTML属性上属性和属性值用=拼接，CSS属性和属性值用：拼接。

• HTML属性用=链接，CSS属性用：链接

• 层叠的概念：同一个元素使用了不同的样式表，所有的样式进行叠加就叫做层叠。

• 冲突的概念：同一元素设置相同的属性就会造成冲突，遵循就近原则选择就叫属性。冲突是一种代码上的逻辑错误。

• 继承：在子父关系中文本样式可以被继承，以下代码中div为父，font为子。布局样式如宽高，不能被继承（块级元素继承父的宽，行级不行。）

CSS写法一

style内联样式，内部样式（不建议频繁使用）。

结构样式分离代码如下

<font color="red" size="7" face="宋体" style"background-color:blue;"文字标签</font>

CSS写法二

内部样式：在头部中写

<style>
font{
    
    background-color;blue;
    color:red;
    font-size:20px;
    font-family :"宋体"；
}
</style>

CSS写法3

外部样式表：在body中写

<link rel="stylesheet" href="./外部样式文件.css">

CSS写法4（作为了解，不常用）

1.标签选择器

2.全局选择器

/*去默认盒模型*/
*{
   margin:0;
   padding:0;
}

/*去无序列表的点*/
ul li{list-style:none;}

3.class选择器

class加.

.q{background-color:auua;}
<li class="q"> damo1 </li>

4.id选择器

#q{background-color:yellow;}
<li class="q"> damo2 </li>

5.群组选择器

b,a{
    background-color:red;
}

6.层次选择器

子代选择器

ul>li{color:red;}


<ul>
    <li> damo3 </li>
</ul>

后代选择器 空格

ul li{list-style:none;}

7.兄弟选择器( 向下 )

相邻兄弟 +

ul+a{
    background-color:red;
}

<ul>
	<a>
</ul>

通用兄弟 ~

ul>li~a{
		 background-color:red;
}

8.ui 伪类选择器

ui 伪类 a标签使用

/*默认状态*/
b+a:link{ }
/*访问后状态*/
b+a:visited{ }
/*鼠标悬浮*/
b+a:hover{ }
/*鼠标按下*/
b+a:active{ }

9.结构伪类

ul li:nth-child(3){ 
    background-color:red;
}

以上为常用原则器，其他选择器只做了解。

面试题：从属关系，加载速度区别。