CSS学习笔记（详细）

目录

1.初识css

1.1 CSS的定义

1.2 CSS的发展史

1.3 CSS的优势

 1.4 CSS语法

1.5 style标签

1.6 引入（使用）CSS的3种方式

1.6.1 行内样式

1.6.2 内部样式表

1.6.3 外部样式表

1.6.4 CSS样式优先级

2.基本选择器

2.1 标签选择器

2.2 类选择器

2.3 ID选择器

 3.高级选择器

3.1 层次选择器

3.1.1 后代选择器

3.1.2 子选择器

3.1.3 相邻兄弟选择器

 3.1.4 通用兄弟选择器

3.2 结构伪类选择器

​3.3 属性选择器

 3.3.1 E[attr]

3.3.2 E[attr=val]

 3.3.3 E[attr^=val]

 3.3.4 E[attr$=val]

3.3.5 E[attr*=val]

1.初识css

1.1 CSS的定义

Cascading Style Sheet  级联样式表

表现为HTML或XHTML文件样式的计算机语言 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定

若将HTML比做人的骨架，那么CSS就是皮肤，在骨架的架构上进行修饰美化。

CSS文件后缀名就是.css

1.2 CSS的发展史

自CSS 3.0推出至今依然在沿用

1.3 CSS的优势

1. 内容与表现分离
2. 网页的表现统一，容易修改
3. 丰富的样式，使得页面布局更加灵活
4. 减少网页的代码量，增加网页的浏览速度，节省网络带宽
5. 运用独立于页面的CSS，有利于网页被搜索引擎收录

 1.4 CSS语法

选择器{

   属性名1:属性值；

   属性名2:属性值；

}

特点1:选择器包含基本选择器和高级选择器，用来获取html元素

特点2:{}代表语法体，用来存放css代码

特点3:属性名一般是CSS中的语法

特点4:属性值一般是属性的内容或范围

特点5:“；”基于W3C标准不建议省略

例如：对h1标题修饰字体颜色绿色，字体大小10px

h1{
    color:green;
    font-size:10px;
}

1.5 style标签

<style type="text/css">
<--这里写css代码-->
</style>

特点1:使CSS的代码在网页中生效

特点2:type=”text/css”代表告诉浏览器当前style标签中的代码是css代码（CSS生效）

1.6 引入（使用）CSS的3种方式

1.6.1 行内样式

在HTML标签行中引入style属性，并对属性名设置属性值，或者对多个属性名设置多个属性值

<p style="background: blanchedalmond;color: #000;">我的中国</p>

1.6.2 内部样式表

在head标签中引入<style>标签，type = “text/css”代表告诉浏览器style标签中的是css代码。

<style type="text/css">
	p{
		background-color: aqua;
	}
</style>

<p>ok</p>

1.6.3 外部样式表

1:利用link标签

2:rel=“stylesheet”代表使用的是外部样式表

3:type=”text/css”告诉浏览器文件中的代码是css代码

4:href=“css/indexcss.css“代表当前html页面引入的是css文件夹路径下的indexcss.css文件

5:css代码写在css文件夹路径下的indexcss.css文件

<link rel="stylesheet" href="css/indexcss.css" type="text/css"/>

1.6.4 CSS样式优先级

（1）行内样式>内部样式表>外部样式表

（2）就近原则（离HTML越近，生效的可能性越大）

一般来说是就近原则，但是不绝对，例如你同时写了行内样式和内部样式，这时优先生效行内样式，但是同时内部样式的设置可能也会部分生效，最终呈现出四不像。

2.基本选择器

2.1 标签选择器

标签选择器以某一标签名命名，对页面内所有该标签元素生效

例如：对p标签设置字体颜色为绿色,则页面内所有p标签内内容字体颜色为绿色

 

2.2 类选择器

 

2.3 ID选择器

特点1:在html中定义id属性

特点2:在css中定义#id属性值

 3.高级选择器

一般来说这方面的内容不用全部掌握，或者说压根无法全部学完，就像新华字典，我们不可能去牢记每一个字，也没必要，这里介绍一些常用的选择器。

3.1 层次选择器

3.1.1 后代选择器

用法：div p{ }

3.1.2 子选择器

用法：div>p{ }

 

3.1.3 相邻兄弟选择器

用法：div+P{ }

 3.1.4 通用兄弟选择器

定义：选择所有的紧接着div元素后面的p元素

如：div～p{
background: lightyellow;

}

 3.2 结构伪类选择器

特点1:常用的结构伪类选择器的种类：first-child last-child

特点2:匹配某个元素的父元素的第一个或最后一个某元素

特点3:利用特殊字符冒号：模拟类选择器的作用实现第一个或是最后一个的元素标签

 3.3 属性选择器

 3.3.1 E[attr]

定义：选择匹配具有属性attr的E元素

3.3.2 E[attr=val]

定义：选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）

 3.3.3 E[attr^=val]

定义：选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串

 3.3.4 E[attr$=val]

定义：选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串

3.3.5 E[attr*=val]

选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配