用CSS美化你的HTML

CSS的简介：

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 >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: 文本所在行高的垂直对齐方式

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 使用给定的字符串来代表被修剪的文本

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style> 
        div { 
            width: 100px; 
            height: 100px; 
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 
        } 
    </style> 
</head> 
<body> 
    <div>mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson mosson</div> 
</body> 
</html>

文本溢出的样式