1、css基础
1)什么是CSS
CSS又叫层叠样式表，是web标准中的表现标准，主要负责网页中内容的布局和样式
2)css写在哪儿
a、内联样式表 - 将CSS代码写到标签的style属性中
b、内部样式表 - 将CSS代码写在style标签中
c、外部样式表 - 将CSS代码写在css文件中；然后再通过link标签在html文件中导入
3)怎么写样式表
1)语法：
选择器{属性1:属性值1; 属性2:属性值2; 属性3: 属性值3; ...}
2)说明
选择器 - 选中需要添加样式的标签
{} - 固定写法
注意: 如果是内联样式'选择器{}'可以省略
属性 - 属性名和属性值用冒号连接，属性和属性之间用分号隔开
学CSS就是学CSS中的属性和功能
注意: 如果属性值是表示大小的数字，必须加单位： px(像素)、em(空格); 也可以使用百分比
3)常用属性
color - 设置文字颜色
background-color - 设置背景颜色
font-size - 字体大小
width - 宽度
height - 高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--外部样式-->
<link rel="stylesheet" type="text/css" href="css/10-CSS基础.css"/>
<!--内部样式-->
<style type="text/css">
/*这儿的的代码就是CSS代码*/
#p1{
color: blue;
}
</style>
</head>
<body>
<!--内联样式表-->
<p style="color: red;">我是段落1</p>
<p id="p1">我是段落2</p>
</body>
</html>
2、选择器
- css中的选择器就是用来选中标签的
1)选择器
1、元素(标签)选择器：直接将标签名作为选择器，选中当前页面中所有的指定标签
2、id选中器：将id属性值前加一个#作为一个选择器，选中的是当前页面中id属性值是指定值的标签(id唯一)
3、class选择器：同意个class在一个页面中可以有多个，同一个标签可以有多个class
4、群组选择器：将多个选择器用逗号隔开作为一个选择器
5、后代选择器：将多个选择器用空格隔开作为一个选择器，从第一个开始往后找，找到最后一个选择器对应的标签
6、子代选择器：将多个选择器用>隔开作为一个选择器(两个选择器之间必须为父子关系)
7、通配符：将*作为选择器，选中当前页面所有的标签
2)伪类选择器
1.什么是伪类选择器
- 普通选择器选中的是一个标签所有的状态，选中后添加的样式对标签的所有状态有效
- 伪类选择器选中的是一个标签指定的状态，选中后添加的样式只针对这一个状态有效
&msp;2.语法:
- 普通选择器:状态{}
div #p1{
color: yellow;
}
1)link - 链接没有被成功访问的时候对应的状态, 只有a标签才有这个状态
2)visited - 链接已经被成功访问过对应的状态， 只有a标签才有
3)hover - 鼠标悬停在标签上对应的状态， 所有可见标签都有效
4)active - 鼠标按住标签不放对应的状态， 所有可见标签都有效
3、选择器的权重
- 如果权重值相同，后写的优先级比先写的高
- 除非特殊说明，内联样式表的优先级最高
- 属性后如果添加了!important，那么这个属性一定会有效
!important >内联选择器样式 > id选择器 > class选择器 > 元素选择器
群组选择器： 看单独选择器的权重
后代/子代选择器: 各选择器之和
伪类选择器与元素选择器一致
001.png
网友评论