CSS 基础语法

=================================
1、CSS概述
2、CSS语法
3、尺寸与边框
=================================
1、CSS概述
1、问题
1、设置页面中所有的文本颜色为红色
2、页面中所有的div里面的文本的颜色变为蓝色
3、页面中所有的div里面的文本的颜色变为绿色
## HTML元素属性的弊端：
1、想完成相同效果，却要使用不同属性
2、HTML元素改变的样式可重用性不高
2、CSS
CSS:Cascading Style Sheets
层叠样式表，级联样式表，样式表
特点：
1、实现了网页内容与表现相分离
2、提高了代码的可重用性和可维护性
3、CSS与HTML之间的关系
1、HTML用于构建网页的结构
2、css负责构建HTML页面元素的样式
4、HTML属性和CSS样式的使用原则
W3C建议尽量使用CSS样式取代HTML属性
1、修改文本的颜色
推荐使用css的color属性
2、修改元素的背景颜色
推荐使用css的background-color属性
如果是HTML元素所特有的属性的话，只能使用HTML元素属性
td元素属性colspan
5、使用CSS样式表的方式(重点)
1、内联方式
作用：将样式定义在单个的HTML元素中
语法：
<ANY style="样式声明1;样式声明2"></ANY>
样式声明语法：
样式属性:属性值
eg:
1、文本颜色的样式属性
color:red;
2、背景颜色的样式属性
background-color:green;
3、文本大小的样式属性
font-size:24px;
练习：设置页面上的某个 div 元素中的样式，文本颜色为黄色(yellow)，背景颜色为黑色(black)，字体大小为48像素
2、内部样式表
1、特点
应用范围为整个页面而不是某一个别元素,能够提升可重用性和可维护性，同时体现内容与表现相分离
2、语法
1、在 <head>元素中增加 <style></style>标记用来声明样式
2、在 <style></style>元素中编写若干 “样式规则”
样式规则语法规范：
1、选择器
作用：规范了页面中哪些元素能够使用声明好的样式
eg：
元素选择器
p div span
2、若干样式声明
属性:值;属性:值;
选择器{若干样式声明}
练习：使用内部样式表，控制页面中所有的p标记，文本颜色为yellow色，背景颜色为black色，文字大小为 24px
3、外部样式表
1、作用
以独立的css样式表文件保存样式规则，可以应用在各个页面中
2、使用步骤
1、创建单独的样式表文件(*.css)
在该文件中可以编写若干样式规则
2、在需要使用该样式表文件的页面上，引入样式表文件
在页面的<head>元素中添加以下代码：
<link rel="stylesheet" href="样式表文件url">
4、基本排错
1、Styles 中提示 "Unknown property name"
说明样式属性名称写错了
2、Styles 中提示 "Invalid property value"
说明样式属性值写错了
2、CSS语法
1、CSS样式表特征
1、继承性
大多数CSS属性是可以被继承的
2、层叠性
可以为一个元素定义多个样式规则
多个样式规则中，如果样式声明不重复的话，那么则可以层叠为一个样式规则
3、优先级
样式定义冲突(重复)时，会按照不同样式的优先级来应用样式
低：浏览器缺省设置(User Agent)
中：外部样式表或内部样式表
就近原则
高：内联样式
注意：继承的样式和自定义样式冲突时，永远都是以自定义的为主
4、!important 规则
显示调整样式属性的优先级
只要 !important 出现，永远都以!important 的为主
语法：
选择器{属性:属性值 !important;}
注意：尽量少用
2、CSS基础选择器(重难点)
1、作用
规范了页面中哪些元素能够使用定义好的样式
同时也帮助我们去匹配页面上的元素
2、选择器
1、通用选择器(了解)
1、作用
匹配页面上所有的元素
2、语法
*{样式声明;}
3、注意
效率低，尽量不用
尽可能通过继承性去代替通用选择器的效果
2、元素选择器
又名：标签选择器，标记选择器
1、作用
匹配页面某一指定元素
比如：
页面所有的 div 元素
页面所有的 p 元素
2、语法
元素{}
ex:
h1{color:red;}
h2{color:blue;}
3、类选择器(重点)
1、作用
允许元素使用附带的class属性值，对选择器进行引用
2、语法
以 . 作为开始
.类名{}
类名：字母，数字，_,-组成,不能以数字开始
引用类选择器:通过元素的 class 属性，进行引用
<ANY class="类名"></ANY>
3、特殊用法-分类选择器
设置class值为redColor的p元素的背景颜色为 Yellow
1、作用
将元素选择器和类选择器结合到一起，从而实现对某种元素的不同样式的细分控制
2、语法
元素选择器.类选择器{
样式声明;
}
p.redColor{
background-color:yellow;
}
4、特殊引用-多类选择器
1、作用
可以让一个元素同时引用多个类选择器,中间用空格分开即可
4、id选择器(重点)
1、作用
只匹配指定ID值得元素
2、语法
#id值{}
5、群组选择器
1 、作用
选择器声明以逗号来隔开的选择器列表.其目的是为了声明一组选择器中的公共样式
2、语法
选择器1,选择器2,选择器3,..,{
}
ex：
设置页面上所有的p元素，span元素，id为d1元素，class为redColor的元素的文本颜色为红色
p,span,#d1,.redColor{
color:red;
}
等同于
p{color:red;}
span{color:red;}
#d1{color:red;}
.redColor{color:red;}
6、后代选择器
1 、作用
用于匹配某元素的后代元素时使用
2、语法
选择器1 选择器2{ }
7、子代选择器
1、作用
用于匹配某元素的子代元素 (只具备一级层级关系被嵌套的元素)
2、语法
选择器1>选择器2{
}
8、伪类选择器
1、作用
为了匹配元素不同的状态的
2、语法
:伪类选择器{}
3、分类
1、链接伪类
:link :匹配超链接未被访问时的状态
:visited :匹配超链接被访问过的状态
2、动态伪类
:hover :匹配鼠标悬停在 html 元素时的状态
:active : 匹配 html元素被激活时的状态
:focus : 匹配html元素获取焦点时的状态(文本框与密码框)
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
3、尺寸与边框
1、CSS单位
1、尺寸单位
1、%
占据父元素尺寸的占比
2、in
英寸，1in=2.54cm
3、cm
厘米
4、mm
毫米
5、px
像素，计算机屏幕上的一个点
6、pt(point)
磅/点
1pt=1/72in
7、em
1em 相当于当前字体尺寸
2em 相当于当前字体尺寸的2倍
注意：css中描述尺寸的单位是不能省略的。
2、颜色单位
1、rgb(r,g,b)
r:red
g:green
b:blue
r,g,b的范围分别是 0~255
background-color:rgb(125,28,96);
2、rgb(r%,g%,b%)
3、#rrggbb
由6位16进制数字表示颜色
16进制范围:
0-9 A-F
#ff0000 : 红色
#123456 :
4、#rgb
#rrggbb的缩写
#001122 --》 #012
5、表示英文的单词
red,green,blue,yellow,
2、尺寸属性
1、作用
尺寸属性一般用于设置元素的宽度和高度
2、宽度
属性：
width
min-width
max-width
注意：min-width/max-width 与 width 属性相冲突，最终以width属性值为准
3、高度
属性：
height
min-height
max-height
4、注意
1、不是所有的元素都支持修改尺寸
支持修改尺寸属性的元素如下：
1、块级元素
2、非块级元素中，存在width，height属性的html元素
table，img
5、溢出
使用尺寸属性控制元素大小时，如果内容所需的空间大小大于元素本身的空间，会导致内容溢出
处理溢出的属性:
overflow:
overflow-x:横向溢出处理
overflow-y:纵向溢出处理
取值：
1、visibile
默认值，溢出可见
2、hidden
隐藏
3、scroll
让元素显示滚动条，溢出时可用
4、auto
自动，溢出时显示滚动条，并可用
3、边框
1、作用
在元素周围绘制一条线
2、属性
1、简写方式
border:width style color;
width:边框粗细，以px为单位
style:边框样式
solid : 实线
dotted : 虚线
dashed : 虚线
color:边框颜色
合法的颜色值
作用：控制元素的上下左右四个边框的粗细，样式，颜色
2、单边定义
border-方向:width style color;
方向：
top：上
bottom：下
left：左
right：右
3、单属性定义
border-属性:值;
属性：
width : 边框粗细
style : 边框样式
color : 边框颜色
作用：控制四条边的对应属性
4、单方向单属性定义
border-方向-属性:值;
5、注意
1、边框颜色可取值为 transparent，意味透明
2、取消边框显示
border:0;
border:none;
border-方向:0;
border-方向:none;