1、html 属性所带来的问题
1、相同的效果,不同的标签会通过不同的属性来表示
2、使用属性 很不通用,一对一的修改,而不是整体修改
2、使用 CSS 来解决上述问题
1、什么是CSS
CSS : Cascading Style Sheet ,层叠样式表,级联样式表,样式表
2、作用
1、实现内容和表现分离
2、提高代码的可重用性和可维护性
3、HTML属性 & CSS样式
能有CSS的话,一定使用CSS来实现样式
如果CSS实现不出来效果,则选择使用html属性
3、使用CSS样式表
1、使用CSS的方式
1、内联方式(行内样式)
将css样式定义在某个单独的标签中
<div style="color:red;"></div>
2、内部样式表
将CSS样式定义在网页中的 <head></head> 中
特点:针对当前网页网页有效
3、外部样式表
将CSS样式定义在一个外部 .css 的文件中,哪个网页用,哪个网页进行引用
特点:所有网页公用,真正意义的实现了重用性 和 可维护性
2、内联方式(行内样式)
将 样式内容 写在 html元素中的style属性中
CSS语法:
属性:属性值;
<div style="属性:属性值;属性:属性值;...."></div>
常用属性:
color : 修改当前标签中文本的颜色
background-color : 修改当前标签的背景颜色
3、内部样式表
【样式规则】 存放在 html文档头部 【head标签】中的 【style 标签】内
样式规则:
选择器{
样式声明
属性:属性值;
属性:属性值;
属性:属性值;
属性:属性值;
}
选择器:
1、定义了一组样式的名称
2、哪些元素能够使用定义好的样式
p{
color:red;
background-color:blue;
}
4、外部样式表
将 样式规则 单独存放在 样式表文件中(**.css),哪个页面想使用,哪个页面就引入当前的样式表文件
step 1 :
创建一个文本文件,将其后缀修改为 .css
在该文件中编写若干 样式规则
step 2 :
在想使用的页面上, 通过 <link /> 引入外部样式表
<link rel="stylesheet" type="text/css" href="样式表文件路径" />
4、样式表特征
1、继承性
大多数的css样式规则可以被继承的。
2、层叠性
为同一个元素 定义多个 样式规则
多个样式规则同时存在时不冲突,多个样式规则会合并成一个,属性重复时以最后一个出现为准。
3、优先级
各级样式表冲突时(行内、内部、外部),会按照不同的优先级来应用样式
0 : 浏览器缺省设置
1 : 内部样式表 或 外部样式表
冲突时:就近原则,谁在下,以谁为主
2 : 行内样式(内联样式)
4、!important 规则
通过 !important 显示调整样式规则的优先级
放在属性值之后,用 空格 来区分。
由!important 标识的属性值,优先级别最高
谨慎使用
5、CSS基础选择器
1、元素选择器
别名:标签选择器、标记选择器
特点:通过元素名称作为选择器名称
作用:修改某一元素的默认样式
body{}
h1{}
h2{}
2、类选择器(类样式)
特点:通过元素的 class 属性来进行引用
作用:定义某一组标签的统一样式
语法:.className{color:red;bakcground:yellow;}
注意:className不能以数字开头
引用:<div class="className"></div>
<h3 class="className"></h3>
注意:在一个class 中可以引用多个 类样式,多个类样式用 空格 隔开
3、分类选择器
由类选择器衍生出来的新选择器
将类选择器 与 元素选择器 结合使用
目的:为了更精准的定位的页面的元素
语法:元素选择器.类选择器{}
p.important{}
4、通用选择器
作用:适配页面上所用的元素,改变他们的样式
语法:*{}
5、id选择器(id样式)
作用:通过页面元素的id值来进行选择器的引用,非常方便的定位到页面上的一个元素。精确定位。
语法:#id{}
eg : #top{background-color:red;}
<div id="top"></div>
id的作用:
1、定义元素在页面中的唯一标识
2、引用样式表中的id样式
6、群组选择器
选择器声明是以 , 隔开的 选择器列表
作用:定义一组元素的样式
h3,p,.new,#test,div.newDiv,p.test{}
7、后代选择器
根据元素的嵌套关系来定义的样式
根据一个元素 去定位 它里面的其他元素
语法:
selector1 selector2{}
selector1 selector2 : 是之前学习过的任何一种选择器
<div>
<div>
<p>
<span></span>
</p>
</div>
<span></span>
</div>
8、子代选择器
要求选择器之间只能存在父子关系
语法:
selector1>selector2
#test>.news{
修改 id为test里面的 class为news的元素(下一级)
}
后代选择器 和 子代选择器 目的是为了精确匹配范围
9、伪类选择器
匹配元素 不同状态时候的选择器
语法:selector1:伪类选择器
伪类选择器分类:
1、链接伪类
:link : 适用于尚未访问的链接(使用较少)
:visited : 适用于访问过的超链接(使用较少)
2、动态伪类
:hover : 适用于鼠标悬停在元素上面时候的状态
:active : 元素被激活的一瞬间的状态
:focus : 适用于元素获取焦点时的状态(input(text,password))
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
6、颜色值:
1、颜色的英文表示法(没人用)
2、rgb(R,G,B)
R : red 0-255
G : green 0-255
B : blue 0-255
rgb(0,0,0) : 表示黑色
rgb(255,255,255) : 表示白色
rgb(125,16,72) :
3、rgb(x%,x%,x%)
rgb(30%,25%,78%)
4、#rrggbb
r:0-9 A-F
g:0-9 A-F
b:0-9 A-F
#000000 : 黑色
#ffffff : 白色
#ff0000 : 红色
#e4393c : 京东红
5、#rgb
#rrggbb 的缩写
#ff0000 --> #f00;
#77aaee --> #7ae;
#e4393c --> 无
#000;
#111
#222
...
#eee
#fff;
7、属性 - 尺寸
设置元素的 宽度 高度
1、宽度
width :
max-width:
min-width: 与 max-width一同定义元素宽度的范围,与width冲突
2、高度
height :
max-height:
min-height:
注意:
只有 块级以及行内块 能够更改 width 和 height
行内元素不能修改 width 和 height
3、溢出
属性:overflow
作用:当内容溢出元素框时,如何处理
值: visible 显示(默认)
hidden 隐藏(常用)
scroll 有滚动条
auto 自动,溢出则显示滚动条,不溢出,没有滚动条
属性:overflow-x : 横向溢出时处理
overflow-y : 纵向溢出时的处理方式
8、边框
属性:
简写方式:
border:width style color;
width:边框线条的宽度
style:边框线条的样式,如实现(solid)、虚线(dotted)
color:边框线条的颜色
一次性 设置 上下左右 四个边框的 宽度 样式 颜色
border:1px solid #f00;
单边定义:
border-方向:width style color;
方向:top,bottom,left,right
border-top:2px solid #000;
border-width:四个边框的宽度
border-style:四个边框的样式
border-color:四个边框的颜色
border-方向-属性:
方向:top,bottom,left,right
属性:color,width,style
注意:边框颜色 除了可以设置正常颜色值之外,还可以设置为 transparent(透明)
border-color:transparent;
border:2px solid transparent;
9、边框倒角(非重点)
元素 的四个方向的圆角设置
属性:border-radius
取值:
1、给定4个值, 分别表示从左上角开始 按顺时针方向的四个角圆角半径
2、给定1个值,表示四个角的圆角半径
给定指定数值,2px , 10px
百分比,当前元素的宽度 的百分比 作为圆角半径
单独定义:
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
10、边框阴影(非重点)
属性:box-shadow : 给指定元素边框增加阴影
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:阴影水平位置
v-shadow:垂直位置
blur : 可选,模糊程度
spread :可选,阴影尺寸
color : 可选,颜色
inset : 可选,将阴影改为 内阴影
常用写法:box-shadow:h-shadow v-shadow blur color;
11、图片边框(非重点)
让图片作为元素的边框出现
属性:border-image:source width repeat
12、轮廓(非重点)
元素的周围绘制一条线,位于边框之外
outline:width style color;
outline:10px solid red;
1、相同的效果,不同的标签会通过不同的属性来表示
2、使用属性 很不通用,一对一的修改,而不是整体修改
2、使用 CSS 来解决上述问题
1、什么是CSS
CSS : Cascading Style Sheet ,层叠样式表,级联样式表,样式表
2、作用
1、实现内容和表现分离
2、提高代码的可重用性和可维护性
3、HTML属性 & CSS样式
能有CSS的话,一定使用CSS来实现样式
如果CSS实现不出来效果,则选择使用html属性
3、使用CSS样式表
1、使用CSS的方式
1、内联方式(行内样式)
将css样式定义在某个单独的标签中
<div style="color:red;"></div>
2、内部样式表
将CSS样式定义在网页中的 <head></head> 中
特点:针对当前网页网页有效
3、外部样式表
将CSS样式定义在一个外部 .css 的文件中,哪个网页用,哪个网页进行引用
特点:所有网页公用,真正意义的实现了重用性 和 可维护性
2、内联方式(行内样式)
将 样式内容 写在 html元素中的style属性中
CSS语法:
属性:属性值;
<div style="属性:属性值;属性:属性值;...."></div>
常用属性:
color : 修改当前标签中文本的颜色
background-color : 修改当前标签的背景颜色
3、内部样式表
【样式规则】 存放在 html文档头部 【head标签】中的 【style 标签】内
样式规则:
选择器{
样式声明
属性:属性值;
属性:属性值;
属性:属性值;
属性:属性值;
}
选择器:
1、定义了一组样式的名称
2、哪些元素能够使用定义好的样式
p{
color:red;
background-color:blue;
}
4、外部样式表
将 样式规则 单独存放在 样式表文件中(**.css),哪个页面想使用,哪个页面就引入当前的样式表文件
step 1 :
创建一个文本文件,将其后缀修改为 .css
在该文件中编写若干 样式规则
step 2 :
在想使用的页面上, 通过 <link /> 引入外部样式表
<link rel="stylesheet" type="text/css" href="样式表文件路径" />
4、样式表特征
1、继承性
大多数的css样式规则可以被继承的。
2、层叠性
为同一个元素 定义多个 样式规则
多个样式规则同时存在时不冲突,多个样式规则会合并成一个,属性重复时以最后一个出现为准。
3、优先级
各级样式表冲突时(行内、内部、外部),会按照不同的优先级来应用样式
0 : 浏览器缺省设置
1 : 内部样式表 或 外部样式表
冲突时:就近原则,谁在下,以谁为主
2 : 行内样式(内联样式)
4、!important 规则
通过 !important 显示调整样式规则的优先级
放在属性值之后,用 空格 来区分。
由!important 标识的属性值,优先级别最高
谨慎使用
5、CSS基础选择器
1、元素选择器
别名:标签选择器、标记选择器
特点:通过元素名称作为选择器名称
作用:修改某一元素的默认样式
body{}
h1{}
h2{}
2、类选择器(类样式)
特点:通过元素的 class 属性来进行引用
作用:定义某一组标签的统一样式
语法:.className{color:red;bakcground:yellow;}
注意:className不能以数字开头
引用:<div class="className"></div>
<h3 class="className"></h3>
注意:在一个class 中可以引用多个 类样式,多个类样式用 空格 隔开
3、分类选择器
由类选择器衍生出来的新选择器
将类选择器 与 元素选择器 结合使用
目的:为了更精准的定位的页面的元素
语法:元素选择器.类选择器{}
p.important{}
4、通用选择器
作用:适配页面上所用的元素,改变他们的样式
语法:*{}
5、id选择器(id样式)
作用:通过页面元素的id值来进行选择器的引用,非常方便的定位到页面上的一个元素。精确定位。
语法:#id{}
eg : #top{background-color:red;}
<div id="top"></div>
id的作用:
1、定义元素在页面中的唯一标识
2、引用样式表中的id样式
6、群组选择器
选择器声明是以 , 隔开的 选择器列表
作用:定义一组元素的样式
h3,p,.new,#test,div.newDiv,p.test{}
7、后代选择器
根据元素的嵌套关系来定义的样式
根据一个元素 去定位 它里面的其他元素
语法:
selector1 selector2{}
selector1 selector2 : 是之前学习过的任何一种选择器
<div>
<div>
<p>
<span></span>
</p>
</div>
<span></span>
</div>
8、子代选择器
要求选择器之间只能存在父子关系
语法:
selector1>selector2
#test>.news{
修改 id为test里面的 class为news的元素(下一级)
}
后代选择器 和 子代选择器 目的是为了精确匹配范围
9、伪类选择器
匹配元素 不同状态时候的选择器
语法:selector1:伪类选择器
伪类选择器分类:
1、链接伪类
:link : 适用于尚未访问的链接(使用较少)
:visited : 适用于访问过的超链接(使用较少)
2、动态伪类
:hover : 适用于鼠标悬停在元素上面时候的状态
:active : 元素被激活的一瞬间的状态
:focus : 适用于元素获取焦点时的状态(input(text,password))
3、目标伪类
4、元素状态伪类
5、结构伪类
6、否定伪类
6、颜色值:
1、颜色的英文表示法(没人用)
2、rgb(R,G,B)
R : red 0-255
G : green 0-255
B : blue 0-255
rgb(0,0,0) : 表示黑色
rgb(255,255,255) : 表示白色
rgb(125,16,72) :
3、rgb(x%,x%,x%)
rgb(30%,25%,78%)
4、#rrggbb
r:0-9 A-F
g:0-9 A-F
b:0-9 A-F
#000000 : 黑色
#ffffff : 白色
#ff0000 : 红色
#e4393c : 京东红
5、#rgb
#rrggbb 的缩写
#ff0000 --> #f00;
#77aaee --> #7ae;
#e4393c --> 无
#000;
#111
#222
...
#eee
#fff;
7、属性 - 尺寸
设置元素的 宽度 高度
1、宽度
width :
max-width:
min-width: 与 max-width一同定义元素宽度的范围,与width冲突
2、高度
height :
max-height:
min-height:
注意:
只有 块级以及行内块 能够更改 width 和 height
行内元素不能修改 width 和 height
3、溢出
属性:overflow
作用:当内容溢出元素框时,如何处理
值: visible 显示(默认)
hidden 隐藏(常用)
scroll 有滚动条
auto 自动,溢出则显示滚动条,不溢出,没有滚动条
属性:overflow-x : 横向溢出时处理
overflow-y : 纵向溢出时的处理方式
8、边框
属性:
简写方式:
border:width style color;
width:边框线条的宽度
style:边框线条的样式,如实现(solid)、虚线(dotted)
color:边框线条的颜色
一次性 设置 上下左右 四个边框的 宽度 样式 颜色
border:1px solid #f00;
单边定义:
border-方向:width style color;
方向:top,bottom,left,right
border-top:2px solid #000;
border-width:四个边框的宽度
border-style:四个边框的样式
border-color:四个边框的颜色
border-方向-属性:
方向:top,bottom,left,right
属性:color,width,style
注意:边框颜色 除了可以设置正常颜色值之外,还可以设置为 transparent(透明)
border-color:transparent;
border:2px solid transparent;
9、边框倒角(非重点)
元素 的四个方向的圆角设置
属性:border-radius
取值:
1、给定4个值, 分别表示从左上角开始 按顺时针方向的四个角圆角半径
2、给定1个值,表示四个角的圆角半径
给定指定数值,2px , 10px
百分比,当前元素的宽度 的百分比 作为圆角半径
单独定义:
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
10、边框阴影(非重点)
属性:box-shadow : 给指定元素边框增加阴影
box-shadow:h-shadow v-shadow blur spread color inset;
h-shadow:阴影水平位置
v-shadow:垂直位置
blur : 可选,模糊程度
spread :可选,阴影尺寸
color : 可选,颜色
inset : 可选,将阴影改为 内阴影
常用写法:box-shadow:h-shadow v-shadow blur color;
11、图片边框(非重点)
让图片作为元素的边框出现
属性:border-image:source width repeat
12、轮廓(非重点)
元素的周围绘制一条线,位于边框之外
outline:width style color;
outline:10px solid red;