CSS小结
前言
-
详细内容查看
1. 什么是CSS
- css是
Cascading Style Sheets的缩写，意思是层叠样式表。层叠：多个样式可以作用在同一个HTML的元素上，同时生效。
2. 为什么要使用CSS
-
将内容展示和样式控制分离，降低耦合度，可以提高开发效率，让分工协作更容易。
-
CSS主要是用来对已经写好的HTML文档进行外观和布局的改变，这部分代码通常保存在外部的.css文件中。
3. 如何引入CSS
-
方法一：内联样式
- 在标签内使用style属性指定css代码
<div style="color:red;"> hello,coderchen </div>
-
方法二：内部样式
-
在head标签内，定义style标签，style标签里写css代码
-
<head> <style> div{ color:blue; } </style> </head>
-
-
方法三：外部样式
-
定义.css资源文件
-
在head标签内定义link标签，引入外部的.css资源文件
-
//定义a.css文件 div{ color:green; } -
//在HTML中引入a.css文件 <link rel="stylesheet" type="text/css" href="css/a.css"> <div> hello coderchen </div>
-
-
注意：方法一二三的css作用范围越来越大。方法二三经常用
-
方法三的link标签可以写为：
<style> @import "css/a.css"; </style>
4. CSS的基本语法
-
格式：
选择器{
属性名1：属性值1；
属性名2：属性值2；
…………
属性名n：属性值n
}
-
选择器筛选具有相似特征的元素
-
注意：每一对属性都要用
;分开，最后一对属性可以不用加。
5. 选择器
-
基础选择器：
- id 选择器：选择具体的id属性值的元素，建议一个HTML页面中id值唯一
—-语法：#id属性值{ }
-
类选择器：选择具有相同class属性值的元素
—-语法：.class属性值{ }
-
元素选择器：选择具有相同标签名称的元素
——语法：标签名称{ }
-
扩展选择器：
-
选择所有元素：
——语法：*{ }
-
并集选择器：
——语法：选择器1，选择器2{ }
-
子选择器：筛选选择器1元素下的选择器2元素
——语法：选择器1 选择器2{ }
-
父选择器：筛选选择器2的父元素选择器
——语法：选择器1 > 选择器2 { }
-
属性选择器：选择元素名称，属性名=属性值的元素
——语法：元素名称[属性名="属性值"] { }
-
伪类选择器：选择一些元素具有的状态
——语法：元素：状态{}
——如：
<a> 状态：
link：正常，未访问过的链接
visited:被访问过的链接
hover：用户鼠标放在链接上时
active：链接被访问的那一刻
hover要跟在link和visited后面，active要跟在hover后面
-
-
注意：
- 多个选择器如果同时作用于一个元素，则会根据选择器优先级来使用优先级较高的选择器所规定的对元素属性的定义。
- 优先级：通用选择器（*）<元素选择器<类选择器<属性选择器<伪类选择器<id选择器<内联样式
6. 盒子模型
- 在css中对HTML元素进行设计和布局时，为了方便，引入了盒子模型。大致上就是除了HTML元素(实际内容)外引入边距（margin），边框(border)和填充(padding)。在指定css元素的高度宽度时，只是设置了内容区域的宽度和高度，实际元素的大小好包括填充，边框，边距。
- margin：清除边框外的区域，外边距是透明的
- border:围绕在内边距和内容外的边框
- padding：清除内容周围的区域，内边距是透明的
- content：盒子的内容，显示文本和图像
7. 属性
-
字体，文本
font-size: 字体大小
color：文本颜色
text-align: 对其方式
line-height: 行高
-
背景
background:
-
边框
border:设置边框
border-style:元素边框样式
border-width:元素边框宽度
border-color:元素边框颜色
-
轮廓
outline:设置轮廓，不会额外增加宽度和高度，只是在元素周围的一条线，起到突出元素的作用
outline-color，outline-style，outline-width
-
尺寸
width:宽度
height:高度
-
float浮动
css的float会使元素向左或者向右移动，周围元素也会重新排列
left ：左 right：右
