css
css层叠样式表,主要用于设置html页面中的文本内容,图片的外形以及版面的布局等外观显示样式。
引入css的三种方式
内联样式(行内样式)
<div style="width:100px;height:100px;"></div>
内部样式表(内嵌式)
将css代码集中写在HTML文档的head头部标签中,并且用style标签定义
<head>
<style>
.box {
width:100px;
}
</style>
</head>
外部样式表(外链式)
扩展名后缀为.css
<head>
< link href="css文件路径" rel="stylesheet"
type="text/css"
>
</head>
基础选择器
css规则由两个主要部分构成:选择器,一条或多条声明
标签选择器
h1 {
color:red;font-size:14px;
}
通配符选择器*
* {
margin: 0;padding: 0;
}
class选择器(伪类选择器)
.box {
width:100px;
}
<div class="box"></div>
类名始终使用字母,数字或连字符,并且始终以字母开头,除了 "-“和”_"连接符不要使用其他特殊字符,类名会区分大小写!
一个标签可以包含多个类名,以空格分隔开
<div class="box red"></div>
id选择器
以id属性来设置id选择器,css中id选择器以“#”来定义
id具有唯一性,同一个页面中同样的id只可出现一次
<div id="text">文字</div>
#test {
text-align: center;color: red;
}
选择器进阶
群组选择器
h1,h2,h3 {
color: red;
}
交集选择器
div.red(标签选择器.类选择器或者ID选择器) {
background-color: red;
}
子代选择器
以下代码实现选择div
标签中所有直接子标签p
div>p {
background-color: red;
}
后代选择器
后代选择器可以选择作为某标签后代的标签。
div span {
color: red;
}
伪类选择器
·a:hover 鼠标悬停
·a:link 正常,未访问过的链接 默认样式带有下划线
·a:visited 访问过后
·a:active 鼠标激活时
文本字体属性
css文本属性
color: 设置文字颜色
text-align: 设置水平对齐方式
text-decoration: 添加文本装饰效果 常用属性值:
·none 默认
·underline 下划线
·overline 上划线
·line-through 穿过文本的线
text-indent 文本块首行的缩进
css字头
font-size 设置文本大小
font-family 设置文本的字体系列
font-style 指定斜体文字的字体样式。常用属性值:
·normal 文本显示正常
·italic 文本显示斜体
font-weight 设置文本的粗细 常用属性值:
·normal 正常 400
·bold 粗体 700
line-height 设置行高 常用属性值:
·normal 默认
·number 设置数字
·length 设置固定的行间距
line-height等于height可使文本垂直居中
font 字体简写属性
简写顺序:
font: font-style font-weight font-size/line-height font-family
1、顺序不能改变;
2、简写为一行的时候,font-size和line-height直接一样要用斜杠,不能分开写;
3、没有赋值的属性,会自动使用默认值;
4、只有同时具有 font-size和font-family时,简写有效
css的长度单位
·px 像素,绝对单位
·em 相对单位,如果用于font-size属性本身,则是相对于父标签的font-size。若用于其他属性,则相对于本身标签的font-size。所有未经调整的浏览器都符合:1em=16px;
·百分比
·rem 相对字体长度单位,只相对根标签即html标签字体大小
css颜色表示
· 十六进制表示法:可表示为:#RRGGBB,RR为红色,GG为绿色 ,BB为蓝色,所以值必须介于0和FF之间。
·rgb表示法:rgb(红, 绿, 蓝) 可在0-255之间调整
·rgba表示法 rgba(红, 绿, 蓝, alpha) alpha 是一个介于0.0(完全透明)和1.0(完全不透明)之间的参数