用CSS美化你的HTML
2016-07-12 08:55
441 查看
CSS的简介：
1、CSS的定义：层叠样式表。属性和属性值用冒号分隔开，以分号结尾(这些符号都是英文的)。
2、CSS得引入方式：
行内引入：<div style="这里写样式">我是一个块级的标签</div>
嵌入式：将CSS样式表放到head中用<style>标签包裹起来
导入式： 将一个独立的.css文件引入HTML文件中，导入式使用@import 引入外部CSS文件，<style>标记也是写在<head>标记中。 导入式会在整个网页装载完后再装载CSS文件。
链接式引入：将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。 链接式会以网页文件主体装载前装载CSS文件。
3、样式的应用顺序：
行内样式优先级最高
针对相同的样式属性，不同的样式属性将以合并的方式呈现
相同样式并且相同属性，呈现方式在<head>中的顺序决定，后面会覆盖前面属性
!important
指定样式规则应用最优先
二、选择器
基本选择器：
1、通用元素选择器：
* 表示应用到所有的标签。
2、标签选择器
匹配所有使用 div 标签的元素（可以匹配所有标签）
3、类选择器
匹配所有class属性中包含info的元素。
语法：.类名{样式}（类名不能以数字开头，类名要区分大小写。）
4、id选择器
使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。
语法：#ID名{样式}（ID名不能以数字开头
组合选择器：
1、多元素组合选择器
同时匹配两个或多个标签，用逗号隔开
2、后代元素选择器
匹配所有div标签里嵌套的P标签，之间用空格分隔。
3、子代元素选择器
匹配所有div标签里嵌套的子P标签，之间用>分隔。
4、毗邻元素选择器
匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。
属性选择器
1.[title] & P[title]
设置所有具有title属性的标签元素；
设置所有具有title属性的P标签元素。
2.[title=mk]
设置所有title属性等于“mk”的标签元素。
2.[title=mk]
设置所有title属性具有多个空格分隔的值、其中一个值等于“mk”的标签元素。
4.[title|=mk]
设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"mk"开头的标签元素。
例：lang属性："en"、"en-us"、"en-gb"等等
5.[title^=Nick]
设置属性值以指定值开头的每个标签元素。
6.[title$=Nick]
设置属性值以指定值结尾的每个标签元素。
7.[title*=Nick]
设置属性值中包含指定值的每个元素
伪类选择器：
1. link、hover、active、visited
a:link（未访问的链接状态）,用于定义了常规的链接状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:active（在链接上按下鼠标时的状态）。
a:visited（已访问过的链接状态）,可以看出已经访问过的链接。
2. before、after
P:before在每个<p>元素的内容之前插入内容;
P:after在每个<p>元素的内容之后插入内容。
常用的属性：
1. 颜色属性：
color
HEX（十六进制色：color: #FFFF00 --> 缩写：#FF0）
RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）
HSL（CSS3有效,H表示色调，S表示饱和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
HSLA（和HSL相似，A表示Alpha透明度，取值0~1之间。）
transparent
全透明，使用方式：color: transparent
opacity
元素的透明度，语法：opacity: 0.5;
属性值在0.0到1.0范围内，0表示透明，1表示不透明。
filter滤镜属性（只适用于早期的IE浏览器，语法：filter:alpha(opacity:20);）。
2. 字体属性:
font-style: 用于规定斜体文本
normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示
font-weight: 设置文本的粗细
normal（默认）
bold（加粗）
bolder（相当于<strong>和<b>标签）
lighter （常规）
100 ~ 900 整百（400=normal，700=bold）
font-size: 设置字体的大小
默认值：medium
<absolute-size>可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
<relative-size>相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
<percentage>百分比指定文字大小。
<length>用长度值指定文字大小，不允许负值。
font-family：字体名称
使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）
font：简写属性
语法：font：字体大小/行高 字体;（字体要在最后）
3. 文本属性:
white-space: 设置元素中空白的处理方式
normal：默认处理方式。
pre：保留空格，当文字超出边界时不换行
nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
pre-wrap：保留空格，当文字碰到边界时换行
pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行
direction: 规定文本的方向
ltr 默认，文本方向从左到右。
rtl 文本方向从右到左。
text-align: 文本的水平对齐方式
left
center
right
line-height: 文本行高
normal 默认
vertical-align: [b]文本所在行高的垂直对齐方式[/b]
baseline 默认
sub 垂直对齐文本的下标，和<sub>标签一样的效果
super 垂直对齐文本的上标，和<sup>标签一样的效果
top 对象的顶端与所在容器的顶端对齐
text-top 对象的顶端与所在行文字顶端对齐
middle 元素对象基于基线垂直对齐
bottom 对象的底端与所在行的文字底部对齐
text-bottom 对象的底端与所在行文字的底端对齐
text-indent: 文本缩进
letter-spacing: 添加字母之间的空白
word-spacing: 添加每个单词之间的空白
text-transform: 属性控制文本的大小写
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义仅有小写字母。
text-overflow: 文本溢出样式
clip 修剪文本。
ellipsis 显示省略符号...来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本
transition 支持的属性
1、CSS的定义：层叠样式表。属性和属性值用冒号分隔开，以分号结尾(这些符号都是英文的)。
2、CSS得引入方式：
行内引入：<div style="这里写样式">我是一个块级的标签</div>
嵌入式：将CSS样式表放到head中用<style>标签包裹起来
<head> ... <style type="text/css"> ...此处写CSS样式 </style> </head>
导入式： 将一个独立的.css文件引入HTML文件中，导入式使用@import 引入外部CSS文件，<style>标记也是写在<head>标记中。 导入式会在整个网页装载完后再装载CSS文件。
<head> ... <style type="text/css"> @import "My.css"; 此处注意.css文件的路径 </style> </head>
链接式引入：将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。 链接式会以网页文件主体装载前装载CSS文件。
<head> ... <link href="My.css" rel="stylesheet" type="text/css"> </head>
3、样式的应用顺序：
行内样式优先级最高
针对相同的样式属性，不同的样式属性将以合并的方式呈现
相同样式并且相同属性，呈现方式在<head>中的顺序决定，后面会覆盖前面属性
!important
指定样式规则应用最优先
二、选择器
基本选择器：
1、通用元素选择器：
* 表示应用到所有的标签。
*{margin：0；padding：0；}2、标签选择器
匹配所有使用 div 标签的元素（可以匹配所有标签）
div {color: yellow}3、类选择器
匹配所有class属性中包含info的元素。
语法：.类名{样式}（类名不能以数字开头，类名要区分大小写。）
.yanse{color:yellow}
<div class="yanse"/>我的div</div>4、id选择器
使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。
语法：#ID名{样式}（ID名不能以数字开头
#Mycolor {color: yellow}
<h3 id="Mycolor">H3</h3>组合选择器：
1、多元素组合选择器
同时匹配两个或多个标签，用逗号隔开
p，a，div{color: yellow;}
<p>段落</p>
<a>link</a>
<div>kuai</div>2、后代元素选择器
匹配所有div标签里嵌套的P标签，之间用空格分隔。
div p {color: yellow;}
<div>
<p>pppppp</p>
<div>
<p>pppppp</p>
</div>
</div>3、子代元素选择器
匹配所有div标签里嵌套的子P标签，之间用>分隔。
div > p {color: yellow;}
<div>
<p>div</p>
<p>div</p>
</div>4、毗邻元素选择器
匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。
div + p {color: yellow;}
<div>div</div>
<p>ppp</p>属性选择器
1.[title] & P[title]
设置所有具有title属性的标签元素；
设置所有具有title属性的P标签元素。
[title]
{
color: yellow;
}
p[title]
{
color: yellow;
}
<div title>hello</div>
<p title>hello</p>2.[title=mk]
设置所有title属性等于“mk”的标签元素。
[title="mk"]
{
color: yellow;
}
<p title="mk">mk</p>2.[title=mk]
设置所有title属性具有多个空格分隔的值、其中一个值等于“mk”的标签元素。
[title~="mk"]
{
color: yellow;
}
<p title="mk Jenny">Mk</p>
<p title="Jenny mk">Mk</p>4.[title|=mk]
设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以"mk"开头的标签元素。
例：lang属性："en"、"en-us"、"en-gb"等等
[title|="mk"]
{
color: yellow;
}
<p title="mk-Jenny">mk</p>5.[title^=Nick]
设置属性值以指定值开头的每个标签元素。
[title^="mk"]
{
color: yellow;
}
<p title="mkJenny">mk</p>6.[title$=Nick]
设置属性值以指定值结尾的每个标签元素。
[title$="mk"]
{
color: yellow;
}
<p title="Jenny mk">mk</p>7.[title*=Nick]
设置属性值中包含指定值的每个元素
[title*="mk"]
{
color: yellow;
}
<p title="SmkJenny">mk</p>伪类选择器：
1. link、hover、active、visited
a:link（未访问的链接状态）,用于定义了常规的链接状态。
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
a:active（在链接上按下鼠标时的状态）。
a:visited（已访问过的链接状态）,可以看出已经访问过的链接。
2. before、after
P:before在每个<p>元素的内容之前插入内容;
P:after在每个<p>元素的内容之后插入内容。
常用的属性：
1. 颜色属性：
color
HEX（十六进制色：color: #FFFF00 --> 缩写：#FF0）
RGB（红绿蓝，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
RGBA（红绿蓝透明度，A是透明度在0~1之间取值。使用方式：color:rgba(255,255,0,0.5)）
HSL（CSS3有效,H表示色调，S表示饱和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
HSLA（和HSL相似，A表示Alpha透明度，取值0~1之间。）
transparent
全透明，使用方式：color: transparent
opacity
元素的透明度，语法：opacity: 0.5;
属性值在0.0到1.0范围内，0表示透明，1表示不透明。
filter滤镜属性（只适用于早期的IE浏览器，语法：filter:alpha(opacity:20);）。
2. 字体属性:
font-style: 用于规定斜体文本
normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示
font-weight: 设置文本的粗细
normal（默认）
bold（加粗）
bolder（相当于<strong>和<b>标签）
lighter （常规）
100 ~ 900 整百（400=normal，700=bold）
font-size: 设置字体的大小
默认值：medium
<absolute-size>可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
<relative-size>相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
<percentage>百分比指定文字大小。
<length>用长度值指定文字大小，不允许负值。
font-family：字体名称
使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找）
font：简写属性
语法：font：字体大小/行高 字体;（字体要在最后）
3. 文本属性:
white-space: 设置元素中空白的处理方式
normal：默认处理方式。
pre：保留空格，当文字超出边界时不换行
nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
pre-wrap：保留空格，当文字碰到边界时换行
pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行
direction: 规定文本的方向
ltr 默认，文本方向从左到右。
rtl 文本方向从右到左。
text-align: 文本的水平对齐方式
left
center
right
line-height: 文本行高
normal 默认
vertical-align: [b]文本所在行高的垂直对齐方式[/b]
baseline 默认
sub 垂直对齐文本的下标，和<sub>标签一样的效果
super 垂直对齐文本的上标，和<sup>标签一样的效果
top 对象的顶端与所在容器的顶端对齐
text-top 对象的顶端与所在行文字顶端对齐
middle 元素对象基于基线垂直对齐
bottom 对象的底端与所在行的文字底部对齐
text-bottom 对象的底端与所在行文字的底端对齐
text-indent: 文本缩进
letter-spacing: 添加字母之间的空白
word-spacing: 添加每个单词之间的空白
text-transform: 属性控制文本的大小写
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义仅有小写字母。
text-overflow: 文本溢出样式
clip 修剪文本。
ellipsis 显示省略符号...来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本
#支持执行transition效果的属性 Property Name Type background-color as color background-position as repeatable list of simple list of length, percentage, or calc border-bottom-color as color border-bottom-width as length border-left-color as color border-left-width as length border-right-color as color border-right-width as length border-spacing as simple list of length border-top-color as color border-top-width as length bottom as length, percentage, or calc clip as rectangle color as color font-size as length font-weight as font weight height as length, percentage, or calc left as length, percentage, or calc letter-spacing as length line-height as either number or length margin-bottom as length margin-left as length margin-right as length margin-top as length max-height as length, percentage, or calc max-width as length, percentage, or calc min-height as length, percentage, or calc min-width as length, percentage, or calc opacity as number outline-color as color outline-width as length padding-bottom as length padding-left as length padding-right as length padding-top as length right as length, percentage, or calc text-indent as length, percentage, or calc text-shadow as shadow list top as length, percentage, or calc vertical-align as length visibility as visibility width as length, percentage, or calc word-spacing as length z-index as integer
transition 支持的属性
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 盒模型与浮动布局
- css去掉button点击后的蓝框
- 样式重置
- 网页从右至左滑出效果
- css折叠样式（2）――定义样式表
- 实现垂直居中的几种方式
- CSS进阶（ Leveling up in CSS）
- css折叠样式（1）――使用css样式的三种方式
- js兼容获取元素的样式
- [转]一款漂亮的表单输入框样式
- css小记
- jsp中css突然不能访问
- CSS3新属性 border-radius版企鹅
- CSS样式覆盖规则
- 旋转的魔方-3D
- 当div中插入图片时，图片下方有空隙的解决办法！
- inline-block-inline-block的简单区别
- overflow与滚动条
- 常用CSS缩写语法总结
- Css公共文件结构