css简介
html 结构 30个左右标签,先用一段时间
css 表现 外在显示的样子
js 行为
css
1.层叠样式表
2.网页实际上是一个多层的结构,通过css可以分别为网页的每一层来设置样式 ,而最终我们能看到的只有最上边的一层
3.设置网页中元素的样式
css学习:
css书写位置:3种
css选择器:30种左右
css样式:字体,文本,盒子模型,浮动,定位,背景····
css语法
CSS的注释,作用和HTML注释类似,只不过它必须编写在style标签中,或者是css文件中
快捷键:ctrl+/
CSS的语法:
选择器 声明块
选择器:选中需要设置样式的部分
声明块:具体样式,是一组组名值对结构
外部样式
/* 头部样式 */
h2 {
color: orange;
background-color: pink;
}
css书写位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 需求:给p标签和div标签内容设置一些css样式 -->
<style>
h1 {
color: red;
background-color: green;
width: 200px;
height: 200px;
}
</style>
</head>
<body></body>
</html>
第一种方式:内联样式/行内样式
书写位置:
在开始标签或者自结束标签内,写一个style属性,将css样式写在style属性值里
可以写多组样式,样式与样式之间要用;隔开
缺点:
1、html结构和css表现耦合了,导致代码宽度变大,不方便查看
2、不易修改
3、权重很高,后期很难通过js或者其他框架去修改
不推荐使用!!
第二种方式:内部样式表
书写位置:
在head标签内,写一个style子标签,通过选择器选中对应的内容,
在{}内书写css样式,可以写多组样式,样式与样式之间;隔开
缺点:
1、css样式还是写在html文件内,如果css样式过多,会导致html文件很长,不方便查看html结构
2、不方便复用
如果css代码较少,且不会被复用,可以使用内部样式表
第三种方式:外部样式表
书写位置:
在html文件外新建一个.css文件,在css文件内,通过选择器选中对应的内容
在{}内书写样式,然后通过link标签,将css文件和html文件联系在一起
如果css代码较多,代码可能被复用,推荐外部样式写法
<link rel="stylesheet" href="./03.外部样式.css" />
css样式
color 设置字体的颜色,red,green,blue,black,pink·····
background-color 设置背景色 red,green,blue,black,pink·····
font-size 设置字体的大小 默认是16px
width 设置元素的宽度 单位:px
height 设置元素的高度 单位:px
css样式的语法:样式名:样式值;
color:red;
css常用选择器
1、标签选择器:
语法:标签名{}
作用:选中对应标签包裹的内容
注意:常用的标签就那么多,如果用标签选择器,很可能会选中其他不需要设置样式的内容
h1 {
color: red;
}
2、id选择器
作用:选中对应id属性值的内容
语法:#id属性值{}
注意:
id属性值:不能以数字开头,最好不要是汉字
id属性值不能复用
#p1 {
color: green;
}
3、class选择器
作用:跟id选择器很像,选中对应class属性值的内容
语法:.class属性值{}
注意:也是我们用的最多的选择器
.p2 {
color: rgb(141, 120, 81);
}
.p3 {
background-color: blueviolet;
}
4、通配选择器
语法:*{}
作用:选中所有的标签
* {
font-size: 34px;
}
css复合选择器
复合选择器:
交集选择器
作用:选中同时满足选择器1选择器2选择器3····对应的内容
语法:选择器1选择器2·····{}
注意:如果选择器中有标签选择器,那么标签选择器必须放在首位
并集选择器(群组选择器)
作用:同时选中选择器1,选择器2·····对应的内容
语法:选择器1,选择器2,选择器3·····{}
css关系选择器
元素之间的关系:
父子关系
直接包含和被包含的关系
父元素:直接包含子元素
子元素:直接被父元素包含
祖先后代关系
直接或间接包含和被包含的关系(包括父子关系在内)
祖先元素:直接或间接包含后代元素
后代元素:直接或间接被祖先元素包含的
兄弟关系
拥有共同的父元素
1、子元素选择器:
作用:通过指定的父元素找到指定的子元素
语法:父元素>子元素{}
div>span {
color: red;
}
2、后代选择器
作用:通过指定的祖先元素找到指定的后代元素
语法:祖先元素 后代元素{}
#cs span {
font-size: 30px;
}
3、下一个兄弟选择器
作用:通过指定的兄找到指定的弟
语法:兄+弟{}
.s1+span{
background-color: green;
}
4、所有兄弟选择器
作用:通过指定的兄找到下面所有的兄弟
语法:兄~弟{}
.s1~span {
background-color: pink;
}