本文为基础知识学习过程中的笔记与总结,供以后的温习与参考。
- 概念: Cascading Style Sheets 层叠样式表
- 层叠:多个样式可以作用在同一个html的元素上,同时生效
- 好处:
- 功能强大
- 将内容展示和样式控制分离
- 降低耦合度。解耦
- 让分工协作更容易
- 提高开发效率
- CSS的使用:CSS与html结合方式
- 内联样式
- 在标签内使用style属性指定css代码
- 如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 内联样式 * 在标签内使用style属性指定css代码 --> <div style="color:red;">hello css</div> </body> </html>
- 内部样式
- 在head标签内,定义style标签,style标签的标签体内容就是css代码
- 如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ color:blue; } </style> </head> <body> <div>hello css</div> </body> </html>
- 外部样式
- 定义css资源文件
- 在head标签内,定义link标签,引入外部的资源文件
- 如:a.css文件:
div{ color:green; }
HTML文件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <link rel="stylesheet" href="css/a.css">--> <style> @import "css/a.css"; </style> </head> <body> <!-- 外部样式 1. 定义css资源文件。 2. 在head标签内,定义link标签,引入外部的资源文件 --> <div>hello css</div> </body> </html>
- 注意:
- 1,2,3种方式 css作用范围越来越大
- 第3种格式可以写为:
<style> @import "css/a.css"; </style>
- 内联样式
- css语法:
- 格式:
选择器 { 属性名1:属性值1; 属性名2:属性值2; ... }
- 格式:
- 选择器:筛选具有相似特征的元素
- 分类:
- 基础选择器:
- id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
- 元素选择器:选择具有相同标签名称的元素(id选择器优先级高于元素选择器)
- 类选择器:选择具有相同的class属性值的元素。(类选择器选择器优先级高于元素选择器)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基础选择器</title> <style> .cls1{ <!-- 类选择器 --> color: blue; } div{ <!-- 元素选择器 --> color:green; } #div1{ <!-- id选择器 --> color: red; } </style> </head> <body> <!-- 1. 基础选择器 1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一 * 语法:#id属性值{} 2. 元素选择器:选择具有相同标签名称的元素 * 语法: 标签名称{} * 注意:id选择器优先级高于元素选择器 3. 类选择器:选择具有相同的class属性值的元素。 * 语法:.class属性值{} * 注意:类选择器选择器优先级高于元素选择器 --> <div id="div1">张三</div> <div class="cls1">李四</div> <p class="cls1">张三</p> </body> </html>
- 扩展选择器:
- 选择所有元素
- 并集选择器
- 子选择器:筛选选择器1元素下的选择器2元素
- 父选择器:筛选选择器2的父元素选择器1
- 属性选择器:选择元素名称,属性名=属性值的元素
- 伪类选择器:选择一些元素具有的状态
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>扩展选择器</title> <style> /* 1. 选择所有元素: * 语法: *{} 2. 并集选择器: * 选择器1,选择器2{} 3. 子选择器:筛选选择器1元素下的选择器2元素 * 语法: 选择器1 选择器2{} 4. 父选择器:筛选选择器2的父元素选择器1 * 语法: 选择器1 > 选择器2{} 5. 属性选择器:选择元素名称,属性名=属性值的元素 * 语法: 元素名称[属性名="属性值"]{} 6. 伪类选择器:选择一些元素具有的状态 */ div p{ color:red; } /*子选择器:筛选选择器1元素下的选择器2元素*/ div > p { border: 1px solid; } /*父选择器:筛选选择器2的父元素选择器1 */ input[type='text']{ border: 5px solid; } /*属性选择器 语法: 元素名称[属性名="属性值"]{}*/ /*伪类选择器:选择一些元素具有的状态 * 语法: 元素:状态{} * 状态: * link:初始化的状态 * visited:被访问过的状态 * active:正在访问状态 * hover:鼠标悬浮状态*/ a:link{ color: pink; } a:hover{ color: green; } a:active{ color: yellow; } a:visited{ color: red; } </style> </head> <body> <div> <p>张三</p> </div> <p>李四</p> <div>aaa</div> <input type="text" > <input type="password" > <br> <br> <br> <a href="#">李四</a> </body> </html>
- 基础选择器:
- 分类:
- 属性
- 字体、文本
- font-size:字体大小
- color:文本颜色
- text-align:对齐方式
- line-height:行高
- 背景 background
- 边框
- border: 设置边框,符合属性
- 尺寸:
- width:宽度
- height:高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css属性</title> <style> p{ 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> <body> <p>张三</p> <div> 李四 </div> </body> </html>
- 盒子模型:控制布局
- margin:外边距
- padding:内边距
- 默认情况下内边距会影响整个盒子的大小
- box-sizing: border-box; 设置盒子的属性,让width和height就是最终盒子的大小
- float:浮动(left\right)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css属性</title> <style> div{ 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> <body> <div class="div2"> <div class="div1"></div> </div> <div class="div3">aaaa</div> <div class="div4">bbbbb</div> <div class="div5">cccc</div> </body> </html>
- 字体、文本
- 未完待续