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 爱恨原则 |
286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
