深圳快速网站制作哪里好,中交建设集团有限公司,从域名到网站,苏州工业园区官网1.css语法 * 格式#xff1a;选择器 {属性名1:属性值1;属性名2:属性值2;...}* 选择器:筛选具有相似特征的元素* 注意#xff1a;* 每一对属性需要使用#xff1b;隔开#xff0c;最后一对属性可以不加 2.选择器#xff1a;筛选具有相似特征的元素
* 分类#xff1a;1. 基…1.css语法 * 格式选择器 {属性名1:属性值1;属性名2:属性值2;...}* 选择器:筛选具有相似特征的元素* 注意* 每一对属性需要使用隔开最后一对属性可以不加 2.选择器筛选具有相似特征的元素
* 分类1. 基础选择器1. id选择器选择具体的id属性值的元素.建议在一个html页面中id值唯一* 语法#id属性值{}2. 元素选择器选择具有相同标签名称的元素* 语法 标签名称{}* 注意id选择器优先级高于元素选择器3. 类选择器选择具有相同的class属性值的元素。* 语法.class属性值{}* 注意类选择器选择器优先级高于元素选择器2. 扩展选择器1. 选择所有元素* 语法 *{}2. 并集选择器* 选择器1,选择器2{}3. 子选择器筛选选择器1元素下的选择器2元素* 语法 选择器1 选择器2{}4. 父选择器筛选选择器2的父元素选择器1* 语法 选择器1 选择器2{}5. 属性选择器选择元素名称属性名属性值的元素* 语法 元素名称[属性名属性值]{}6. 伪类选择器选择一些元素具有的状态* 语法 元素:状态{}* 如 a* 状态* link初始化的状态* visited被访问过的状态* active正在访问状态* hover鼠标悬浮状态 3.属性 1. 字体、文本* font-size字体大小* color文本颜色* text-align对其方式* line-height行高 2. 背景* background3. 边框* border设置边框符合属性4. 尺寸* width宽度* height高度5. 盒子模型控制布局* margin外边距* padding内边距* 默认情况下内边距会影响整个盒子的大小* box-sizing: border-box; 设置盒子的属性让width和height就是最终盒子的大小* float浮动* left* right 示例
1.基础选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8title基础选择器/titlestyle.cls1{color: blue;}div{color:green;}#div1{color: red;}/style
/head
body
!--
1. 基础选择器1. id选择器选择具体的id属性值的元素.建议在一个html页面中id值唯一* 语法#id属性值{}2. 元素选择器选择具有相同标签名称的元素* 语法 标签名称{}* 注意id选择器优先级高于元素选择器3. 类选择器选择具有相同的class属性值的元素。* 语法.class属性值{}* 注意类选择器选择器优先级高于元素选择器
--div iddiv1传智播客/divdiv classcls1黑马程序员/divp classcls1传智学院/p/body
/html
2.扩展选择器
!DOCTYPE html
html langen
headmeta charsetUTF-8title扩展选择器/titlestylediv p{color:red;}div p {border: 1px solid;}input[typetext]{border: 5px solid;}a:link{color: pink;}a:hover{color: green;}a:active{color: yellow;}a:visited{color: red;}/style
/head
bodydivp传智播客/p/divp黑马程序员/pdivaaa/divinput typetext input typepassword br br bra href#黑马程序员/a/body
/html
3.CSS属性
!DOCTYPE html
html langen
headmeta charsetUTF-8titlecss属性/titlestylep{color: #FF0000;font-size: 30px;text-align: center;line-height: 200px;/*border 边框*/border: 1px solid red;}div{border: 1px solid red;/*尺寸*/height: 200px;width: 200px;/*背景*/background: url(img/logo.jpg) no-repeat center;}/style
/head
bodyp传智播客/pdiv黑马程序员/div
/body
/html
4.CSS属性_盒子模型
!DOCTYPE html
html langen
headmeta charsetUTF-8titlecss属性/titlestylediv{border: 1px solid red;width: 100px;}.div1{width: 100px;height: 100px;/*外边距*//* margin: 50px; */}.div2{width: 200px;height: 200px;padding: 50px;/*设置盒子的属性让width和height就是最终盒子的大小*/box-sizing: border-box;}.div3{float: left;}.div4{float: left;}.div5{float: right;}/style
/head
bodydiv classdiv2div classdiv1/div/divdiv classdiv3aaaa/divdiv classdiv4bbbbb/divdiv classdiv5cccc/div
/body
/html
