目录
- 一、CSS
- 二、CSS基本语法
- 三、CSS的三种形式
- 1、行内样式
- 2、内部样式
- 3、外部样式
- 4、三者的优先级问题
- 5、代码演示
- 四、选择器
- 1 基础选择器
- 1.1标签选择器
- 1.2 ID选择器
- 1.3 Class选择器
- 1.4 属性选择器
- 2. 组合选择器
- 2.1 层次选择器
- 4.2.2 并列选择器
- 3. 伪类选择器
- 4、选择器的优先级
- 五、CSS常用属性
- 1、尺寸
- 2、文本
- 3、颜色取值
- 4、背景
一、CSS
层叠样式表。（相互叠加一层层的）
CSS作用：通过CSS属性，设置HTML元素的显示样式。
二、CSS基本语法
选择器 {
属性: 值;
属性: 值;
}
1） 选择器：选中HTML页面中的指定标签元素。
2） 属性：不同的属性用于设置不同的显示方式。
3） 值：给属性设置的值。
三、CSS的三种形式
1、行内样式
在HTML标签上，使用style属性设置当前标签的CSS样式。
<标签名 style="属性:值; 属性:值;"></标签名>
例如
<h1 style="color:red; background-color: green">行内样式</h1>
行内样式不需要选择器，样式只对当前的标签有效。
2、内部样式
内部标签是指在HTML的内部
将CSS样式写在style标签中。style标签一般写在head标签中。
<style>
选择器 {
属性: 值;
属性: 值;
}
</style>
内部样式针对当前页面所有符合选择器的标签都有效。
补充注释：
Html的注释：Ctrl+? <!---->
CSS的注释：/* */
3、外部样式
单独写在CSS文件中的样式，CSS文件都是以.css作为后缀的文件。通常放在项目下的CSS文件夹下，名字一般与html的名字相同（对应）。
，
在需要使用的HTML页面中，需要使用link标签引入CSS文件。一般link写在
style标签的前面，如果没有style标签，一般写在head标签里面的最后一个。
<link rel="stylesheet" href="css/css.css">
外部样式在所有引入的页面中，都有效。
一般情况使用外部样式，CSS代码与HTML分离，实现CSS代码复用。
4、三者的优先级问题
行内样式的优先级最高！
就近原则！！！离标签越近的优先生效！
5、代码演示
index.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>这是我的web页面</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="css/index.css">
<!-- 内部样式: -->
<style>
/* 编写CSS */
h1{
text-decoration: underline;
}
h2{
text-decoration:line-through;
}
</style>
</head>
<body>
<!-- 行内样式 -->
<h1 style="color:green;background-color: yellow;">标题一</h1>
<h1>第二个一级标题</h1>
<h2>二级标题</h2>
</body>
</html>
index.css代码：
/* h2文字设置成红色 */
h2{
color: red;
}
显示结果：
四、选择器
选择器的作用：选取HTML标签
1 基础选择器
1.1标签选择器
使用HTML的标签名作为选择器。
HTML标签名 {}
1.2 ID选择器
id是HTML标签常用属性，所有的标签都可以设置id属性，在一个页面中id的值不应该相同。
使用HTML标签的id属性值作为选择器。
#ID值{}
使用举例：
1.3 Class选择器
使用HTML标签的class属性值作为选择器。
.Class值{}
class选择器是最常用的选择器。
与id类似，HTML的标签都可以设置class属性，在一个页面中允许多个元素拥有相同的class值，也允许一个元素拥有多个class值。
<标签名 class="值1 值2 值3..."></标签名>
1.4 属性选择器
根据HTML标签的属性筛选元素。
[属性名]{} 选择拥有指定属性的元素
[属性名='值']{} 选择属性值为指定值的元素
主要针对表单元素input进行样式的设置。
2. 组合选择器
2.1 层次选择器
根据元素与元素之间的关系进行选择。
1） 祖孙选择器
祖先选择器 子孙选择器{}
先选取祖先元素，在祖先的内部再使用子孙选择器选择元素。
代码示例+效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 祖孙选择器：只能选中上面的 -->
<style>
div li{
color:red
}
body ul{
/* 两个都能选中 */
border: 5px solid blue;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>
div li { color: red; }：这个选择器选中了 <div> 标签下的所有 <li> 元素并将其颜色改为红色，因此 1, 2, 3, 4 会变成红色。
第一组 <ul> (位于 <div> 标签内)：
列表项 1, 2, 3, 4 会显示为红色，整个列表会有蓝色的边框。
第二组 <ul> (位于 <body> 标签内)：
列表项 A, B, C, D 显示为默认颜色，且也会有蓝色的边框。
2） 父子选择器
父选择器>子选择器{}
先选取父元素，再从父元素中选择直接子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 祖孙选择器：只能选中上面的 -->
<style>
div li{
color:red
}
body ul{
/* 两个ul都能选中(因为符合祖孙关系)*/
border: 5px solid blue;
}
/* 父子选择器 */
body>ul{
background-color: yellow;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>
3） 兄弟选择器
兄选择器~弟选择器{}
兄选择器+弟选择器{}
~只会选中所有兄元素后面的弟弟元素。
+只会选中哥哥元素紧挨着的弟弟元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 祖孙选择器：只能选中上面的 -->
<style>
div li{
color:red
}
body ul{
/* 两个ul都能选中(因为符合祖孙关系)*/
border: 5px solid blue;
}
/* 父子选择器 */
body>ul{
background-color: yellow;
}
/* 兄弟选择器：~兄；+弟 */
.sh~li{
font-size: 40px;
}
.sh+li{
font-weight: bold;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li class="sh">2</li>
<a>妹妹</a>
<li>3</li>
<li>4</li>
</ul>
</div>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>
4.2.2 并列选择器
第一种：是或的关系满足其中一个也行，它的作用是 选择多个元素，并对它们应用相同的样式。
选择器,选择器{}
第二种：且的关系，必须同时满足条件才能设置成对应的效果：
选择器选择器{}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 祖孙选择器：只能选中上面的 -->
<style>
div li{
color:red
}
body ul{
/* 两个ul都能选中(因为符合祖孙关系)*/
border: 5px solid blue;
}
/* 父子选择器 */
body>ul{
background-color: yellow;
}
/* 兄弟选择器：~兄；+弟 */
.sh~li{
font-size: 40px;
}
.sh+li{
font-weight: bold;
}
/* 并列选择器 */
li,a{
color:yellow;
}
/* 且的关系的并列选择器 */
ul.a{
border-radius: 30px;
}
</style>
</head>
<body>
<div>
<ul class="a">
<li>1</li>
<li class="sh">2</li>
<a>妹妹</a>
<li>3</li>
<li>4</li>
</ul>
</div>
<ul class="b">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
</body>
</html>
3. 伪类选择器
4、选择器的优先级
越精确越优先！
ID > Class=属性 > 标签
同等级别选择，层次选择器的优先级会更高。
五、CSS常用属性
1、尺寸
width：固定宽度
height：固定高度
max-width：最大宽度
max-height：最大高度
min-width：最小宽度
min-height：最小高度
所有的inline（行内元素）元素是无法设置宽高的
取值：像素值，百分比。
2、文本
color：字体颜色
font-size：字体大小，取值：像素值。
font-weight：粗细，取值：100~800、bold。
font-famliy：字体类型，取值：宋体、楷体、黑体等。
text-align：对齐方式，取值：left、center、right。
text-decration：字体修饰线
3、颜色取值
1） 颜色名： red、green、blue、yellow等。
2） 十六进制颜色值： #RGB、#RGBA、#RRGGBB、#RRGGBBAA。
R：红色
G：绿色
B：蓝色
A：透明度
3） 颜色函数：rgb(R, G, B)、rgba(R, G, B, A)。
R、G、B：十进制颜色值，取值0~255整数。
A：透明度，取值：0~1的小数，0表示完全透明，1表示完全不透明。
4、背景
background-color：背景颜色
background-image：背景图片，取值：url(图片地址)
background-repeat：重复，取值：repeat（重复）、repeat-x（水平方向重复）、repeat-y（垂直方向上重复）、no-repeat（不重复）。
background-position：背景图片的位置，即可以使用top,left,right,bottom,center设置，也可以使用像素值。
background-position-x：背景图片水平位置。
background-position-y：背景图片垂直位置。
