1.1 CSS 语法
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
1 | selector {declaration1; declaration2; ... declarationN } |
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
1 | selector {property: value} |
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。
1 | h1 {color:red; font-size:14px;} |
下面的示意图为您展示了上面这段代码的结构:
1.1.1 字体属性:
属性 含义 属性值
1 | font-family 字体 各种字体 |
1.1.2 颜色与背景属性:
属性 含义 属性值
1 | Color 颜色 颜色值 |
1.1.3 文本属性:
属性 含义 属性值
1 | word-spacing 单词间距 n em |
1.1.4 边距属性:
属性 含义 属性值
1 | margin-top 上边距 n em | % |
1.1.5 边框属性:
属性 含义 属性值
1 | Border-top-width 上边框宽度 n em | thin | medium | thick |
1.1.6 图文混排:
属性 含义 属性值
1 | Width 宽度 n em | % |
1.1.7 列表属性:
属性 含义 属性值
1 | Display 是否显示 Block | inline | list-item | none |
1.1.8 鼠标属性:
属性值 含义 属性值 含义
1 | Auto 自动 N-resize 上箭头 |
1.2 CSS选择器
1.2.1 li标签选择器
html:
1 | <li>列表项1</li>(改变标签里的样式类型) |
css:
针对所有列表
1 | li{ |
1.2.2 类选择器 class(把一堆样式划为一类)
1 | <pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA; |
当前页面内可以多个同样 html:
1 | <pre style="margin-bottom:18.0pt;line-height:16.5pt;background:#F6F8FA; |
css:
1 | <pre style="margin-bottom:18.0pt; |
1.2.3 ID选择器 id(也可控制某个DIV样式)
当前页面内唯一id; 如果页面内出现多个相同id,虽然可以解析出,但不规范,不建议
1 | <li id="item">列表项1</li> |
权重越大,优先级越高,优先级高的覆盖优先级低的
各种选择器可以用在列表li、容器div等中
html:
1 | <div>这是一个Div</div> |
CSS:
1 | div{ |
1.3 CSS样式规则
1.3.1 三种定义样式的方法
①**在本文件下的表示方法**
1 | <head> |
②在1.css文件中的表示方法
1 | <link rel="stylesheet" type="text/css" href="1.css"> |
③直接跟着定义样式
1 | <div class=" size show show-1"></div> |
每个样式间用空格隔开,有三个样式 size、show、show-1
1.3.2 颜色
1 | red = #FF0000 = rgb(255,0,0) 红色 |
1.3.3 字体font
1 | width: 200px;宽度 |
长度单位:
1 | px 像素 |
颜色
1 | 十六进制:#ffffff |
尺寸属性:
1 | Height、max_height、min_height |
字体、字号:
1 | font 缩写形式 |
字体颜色
1 | color |
行距、对齐等
1 | line-height 行高 |
1.3.4 列表宽度决定了列表项宽度
1 | height: 100px; |
1.3.5 图片
1 | background-image: url(images/1.jpg); 插入图片 |
1.3.6 块级元素 默认占一行
1 | ★float: left; 浮动 将块级元素变为行级元素 让多行在一行 如果一行放不下,自动转第二行 |
1.3.7 焦点
鼠标移到当前位置时的状态
1 | a:hover{ |
1.3.8 超链接样式的四种状态
1 | 未访问状态 a:link |
、
1.3.9 盒子(矩形方框)
1 | margin(外边距/边界) |
margin
一个值:4边
两个值:上下、左右
四个值:上右下左
1 | margin-left: auto; 左边距自动 |
默认下,div没有边框border(有颜色)
默认不显示border
1 | border-color: blue; |
对同一属性做设置,后面的优先级高
对外边距/边界设置,一般统一格式,不要上边设下边距,下边设上边距;如果设置,按大的显示
1 | margin-bottom: 30px; |
1.3.10 解决浮动问题,使用尾类
1 | .fix{*zoom:1;*clear:both;} |
1.3.11 定位
1 | position: absolute; 绝对定位 |
参照物是距离最近 定位的父元素
1.3.12 对定位元素显示排序
1 | z-index: 1; 数字越大,优先级越高 |
设置 鼠标指到哪里,哪里在上边
1 | .c4:hover{ |
1.3.13 响应式
1 | viewport |
1.3.14 其他样式
header、footer、center、left、right
头 尾 中间 左 右
链接 默认带下划线
1 | <div class=" size show show-1"></div> |
每个样式间用空格隔开,有三个样式 size、show、show-1
1 | list-style:none; 去除前面的列表序列号 |
1.4 为CSS单独建立文件(建立链接link)
1 | <link rel="stylesheet" type="text/css" href="style.css"> |