1.css样式表分别有:
内联样式表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title><style> //这个是内联样式表<style></style>这里面可以书写css样式</style></head><body> <div style="这个也是内联样式表"></div></body></html>
外部样式表
<link rel=“stylesheet” type=“text/css” href=“路径” />
外部样式表是从新创建一个专门的css文件在通过路径去链接
2.css选择符
选择符{属性:属性值;属性:属性值;} 例: div{width:200px;height:100px;background:red; } 每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值 属性必须放在花括号中,属性与属性值用冒号连接。 每条声明用分号结束。 当一个属性有多个属性值的时候,属性值与属性值用空格分隔。 在书写样式过程中,空格、换行等操作不影响属性显示。
3.css选择符
元素选择符也可以叫类型选择符:
例:
<div> <header> <nav> <footer> <figure> ...
通配符 例: *(号选择所有) id选择符: 例: <div id="这个就是id选择符是写在标签里面的"></div>(id=“
里面的可以随便写比如a/b/s/xdv/sv/等但必须要写在双引号里面才可以”) class选择符: 例: <div class="这个就是class选择符跟id选择符是一样都必须要写在双引号里面"></div> 群组选择符: 例:
div , .hehe , p , #top {background:red;} 同时对多个选择符设置同一个样式 选择符与选择符之间用逗号分隔
后代选择符: 例: #nav ul li {background:red;} 缩小范围去选择元素 选择符与选择符之间用空格分隔 伪类选择符: 例: a:link {属性:属性值;} 初始化状态 a:visited {属性:属性值;} 被点击后的状态 a:hover {属性:属性值;} 当鼠标滑过时候的状态 a:active {属性:属性值;} 当鼠标按下时候的状态 伪类选择器只能给特殊的带有href属性的a标签使用 并且只有在特殊的条件下才会有效果
4.选择符的优先级
选择符的优先级即选择符的权重 针对同一个元素或同一群元素 进行选择时起的冲突进行的优先选择的处理。 内联样式的权重为 1000 id选择符的权重为 0100 class选择符的权重为 0010 伪类选择符的权重为 0010 元素选择符的权重为 0001 继承样式的权重为 0000 后代选择符的权重:为后代选择符的权中之和
5.文本的属性
文本大小及单位
文本大小 (设置字体的大小 通常网页字体为12px或14px) font-size:12px; 单位 (通常单位为像素) px像素 pt点 em倍距 3pt=4px em是根据自身的字体大小来决定多少像素 元素的默认大小是16px 1em=16px
文本的属性
font-style:normal/ italic [设置文本为斜体] font-weight:normal(100-500)/ bold(600-900) [设置文本为粗体] font-family: “文本字体1”,”文本字体2”; [文本类型] text-align:left/center/right/justify [文本水平对齐方式] vertical-align:top/middle/bottom[垂直对齐方式] line-height:数字px;[设置文本在一行内的高度] 设置文本简写方式 font:加粗 倾斜 文本大小/行高 “字体”;
文本的颜色
颜色属性十六进制值#f00 #fa0000 red颜色模式:光色模式 R G BFF 00 00
当然除了这个还可以用一些对应的单词
文本修饰
text-decoration 文本修饰none:没有修饰underline:添加下划线overline:添加上划线line-through:添加删除线text-indent 首行缩进
6.背景的设置
背景颜色background-color:#f00;背景图片background-image:url(图片路径);背景图片平铺属性background-repeat:repeat 默认平铺repeat-x 横向平铺repeat-y 纵向平铺no-repeat 不平铺背景图位置background-position:值1(水平) 值2(垂直)left/center/right/数值 top/center/bottom/数值数值可以设置负值背景简写:background:颜色 图片路径 是否平铺 位置;小扩展常用图片格式jpg (图片有损质量 但肉眼难分辨 来减小图片大小 图片非搂空使用);png (图片有损质量 但肉眼分辨不出 来减小图片大小 搂空图片使用的格式)gif (图片有损严重 肉眼容易分别 常用与做动图)
7.浮动属性
float:none 默认不浮动left 左浮动right 右浮动
8.列表li相关独有属相
list-style-type[设置列表符号] disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号);list-style-image:url(路径); [自定义图片列表符号]list-style-position:outside(默认外边)/inside(里边);[定义符号所在位置]list-style:none;去掉列表符号