css基本使用
1、使用css的好处
- css样式, 就是用来美化网页(美颜)。非常方便,维护性好。
层叠:
一层一层:强调的是优先级.
样式表:
很多的属性和属性值
回顾: html使用标签把要操作的数据包裹起来,通过修改标签的属性值,来实现标签内数据的变化
2、css将网页内容和显示样式 进行分离,提高了显示功能
3.提取出html标签中的大部分属性,进行统- -的管理。简化html网页代码结构,同时还可以对多个html网页进
行统- -管理
2、css基本使用
- 1、内嵌样式
1)需要在head标签中,写style标签。
2)在style标签中,写css样式 - 2外部样式
1)创建css文件,后缀.css
2)把样式放在css文件中:
3)把css样式文件引入到html文件中
引人方式1:
rel="stylesheet":引入是脚木文件
type= "text/css":表示是css文件
href="../css/style. css":表示引入文件的路径
<link rel="stylesheet" type= "text/css" href-"../css/style.css"/>
引入方式2
<style>
@import ur1("../css/sty1e.css");
</style>
- 3)行内样式:就是直接在标签上写样式
1)在标签上添加style属性
2)语法: style=“属性1:值1;属性2:值2;…”;|
一般结合选择器来选择标签,添加css样式
- 选择器的分类
1、标签选择器:就是用来选择标签的!
语法:标签名{
属性:属性值
}
<style>
font{
color: aqua;
}
</style>
color:颜色
font-size:字体大小
2、类选择器(class选择器):选择添加了class属性的标签
语法:
.类名{
属性:属性值
}
对应的使用 需要写class=类名
3、id选择器:选择指定的标签,这个标签在当前网页中使用唯一的id
语法:
#id名{
属性:属性值
}
id名必须和属性的id名一样
class和id属性任何标签都可以使用
选择器优先级:id>class>标签
行内样式>内嵌>外部
css选择器
1、基本选择器
id选择器、class选择器、 标签选择器
2、复合选择器
两个或者两个以上的基础选择器通过不同的方式连接在一起。
- 后代选择器:找到指定标签的所有特定的后代标签,设置属性
#选择器1 选择器2... {
属性:值;
}
注意点: .
1.后代选择器必须用空格隔开
2.后代选择器可以通过空格一直延续下去
- 子元素选择器:找到指定标签中所有特定的直接子元素,然后设置属性
#选择器1>选择器2 {
属性:值:
}
- 并集选择器:将同一个样式作用于更多的元素
选择器1,选择器2{
}
- 交集选择器
选择器1.选择器2{
}
- 伪类选择器
语法
标签名:具体操作{
//样式
}
css常用属性
1、字体属性
2、文本属性
text-decoration:none:表示没有修饰 underline:下划线 overline:上划线3、背景属性
如果设置div的行高和div的高度一致,那么div的文字就会垂直居中
4、列表属性