css3语法、尺寸与边框
来源：互联网 发布：外置光驱盒 mac 编辑：程序博客网 时间：2024/04/29 21:44
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;
0 0
- css3语法、尺寸与边框
- CSS3基础——尺寸与边框
- CSS3基础——尺寸与边框2
- CSS基础之CSS概述 、CSS语法 、尺寸与边框
- Css3(05) 背景与边框
- CSS3边框与圆角
- CSS3背景与边框相关样式
- CSS3 边框/颜色/文字与字体/背景
- CSS3圆角、盒阴影与边框图片
- CSS3背景与边框相关样式
- CSS3 边框
- css3 边框
- css3边框
- CSS3 边框
- CSS3边框
- css3边框
- css3边框
- CSS3 边框
- 190. Reverse Bits
- ajax 多文件上传
- C语言实现简单的面向对象例子
- 多事之秋
- 华为OJC++编程题001.计算字符串最后一个单词的长度
- css3语法、尺寸与边框
- 协方差的意义和计算公式
- java之setter和gtter
- unity3d培训_003
- Android init.rc执行顺序
- NOIP 2012 D1T1 Vigenère密码
- 开启memcache 扩展
- mysql -redis 主从复制
- .aspx文件和.aspx.cs文件的区别与联系
