Css 容器标签 – 块级元素
<div></div> | 常用于页面的模块划分 |
类似:<span></span> | 用于行内分区 |
Css介绍 | Cascading Style Sheets 层叠样式表 |
作用 |
|
使用方式 |
语法: <标签 style=”css样式规则”> 样式规则:width :200px ; |
(1)常用属性: width: 取数值,单位为像素px height:取值数,单位为像素px background-color: 背景颜色 color: 取颜色值,设置文本颜色 font-size:取数值,字体大小,单位为px font-weight:设置字体为粗体 ,取值为bold | |
使用<style>样式</style>来引入css样式, 常写在<head><hean>标签里 标签内容:== 样式规则 语法: <style> div{ width:300px; height:300px; ….. } <style> 选择文档中的div元素为其设置样式 | |
(2)css选择器: 由选择器/符 和 样式规则组成 选择符用来规范页面中哪些元素需要设置样式 样式规则 具体的样式声明 | |
创建外部的css文件 (index.css) 使用<link rel=”stylesheet” href=”url”>, 书写在<head>标签中 样式表中采用选择器去声明样式 | |
元素分类 | 块级元素: 独占一行,不与其他元素共行,可以设置宽高 代表元素:div h hl ol li table
行内元素: 可以与其他元素共行,不可以设置宽高 代表元素: span label a strong i b sub sup
行内块元素 即可以与其他元素共行,又可以设置宽高 代表元素: img input |
Css样式表特点 |
可以对同一个元素设置多个不同的样式规则,共同起作用
子元素可以继承父元素中设置的样式 例如: 块元素 默认 宽度与父元素保持一致 文本属性都可以被继承
在样式声明发送冲突的时候,需要考虑优先级 游览器样式 低 文档内嵌/外链样式引入中(这两种形式发生样式冲突时,根据代码的书写顺序决定最终样式,后来者居上) 游览器样式 高 |
Css选择器
作用 | 规范页面中哪些元素可以设置样式 |
分类 |
语法: 标签名{ 属性:值; 属性:值; } 作用:根据标签名在文档中匹配所有的该元素,并为其添加样式 |
语法: <h1 id=”redText_1”></h1> #redText_1{ 属性:值; } 作用:根据元素id属性值进行匹配 特点:
推荐以英文字母开头可以出现下划线和数字
| |
|
语法: <h1 class=”redText2”></h1> .redText2{ 属性:值; } 作用: 根据元素的class属性值进行匹配,可以实现样式复用 特点:
推荐小写字母开头,由数字下划线组成,大小写敏感
开头跟上class 属性值作为选择符
特殊用法:
<h1 class=”redText Green”></h1>
p.orangeText 表示在p元素中查找类名为orangeText的元素 * 标签选择器与其他选择器结合,标签名一定要写在前面 |
|
语法: div , h1 , p{ width:200px; } 作用: 为一组元素共同设置样式 |
语法: 父元素 子元素{ 属性:值; } 作用:为厚点元素设置样式 注意: 1父元素与子元素之间使用空格隔开 2后代元素包含直接子元素和间接字元素 | |
作用:用来匹配父元素中指定的直接子元素 语法:父元素> 子元素{ 属性: 值; } 注意:只会匹配直接后代元素 | |
*表示匹配文档中所有元素 *{ margin:0; padding:0; } 设置文档中所有元素的内外边距0 | |
作用:为元素的不同状态设置样式 以 :开头 分类:
:link 表示超链接未被访问时的状态 :visited 表示超链接被访问过后的样式
:hover 鼠标悬停时的状态 :active 鼠标点按时的状态 :focus 元素获取焦点时的样式,常见于输入框 注意: 如果给超链接设置四种状态的样式,必须按照以下顺序书写伪类
简称 LVHA 爱恨原则 |