css：字体、文本、超链接、列表、背景、渐变样式

旧城等待， 2024-04-06 11:39 42阅读 0赞

**目录**

1、字体样式

2、文本样式

3、css超链接

4、css背景样式

5、线性渐变

--------------------

标签

作用：能让某几个文字或者某个词语凸显出来

示例：

123“你好”123
 123456
 123
 123123123

#### 1、字体样式 ####

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>含义</td> 
 <td>示例</td> 
 </tr> 
 <tr> 
 <td> font-family </td> 
 <td> 设置字体类型 </td> 
 <td> font-family:"隶书"; </td> 
 </tr> 
 <tr> 
 <td> font-size </td> 
 <td> 设置字体大小 </td> 
 <td> font-size:12px; </td> 
 </tr> 
 <tr> 
 <td> font-style </td> 
 <td> 设置字体风格 </td> 
 <td> font-style:italic; </td> 
 </tr> 
 <tr> 
 <td> font-weight </td> 
 <td> 设置字体的粗细 </td> 
 <td> font-weight:bold; </td> 
 </tr> 
 <tr> 
 <td> font </td> 
 <td> 在一个声明中设置所有字体属性 字体属性的顺序：字体风格→字体粗细→字体大小→字体类型 </td> 
 <td> font:italic bold 36px "宋体"; </td> 
 </tr> 
 </tbody> 
</table>

字体类型：font-family

语法：

p{font-family:Verdana,"楷体";}
    
    body{font-family: Times,"Times New Roman", "楷体";}

各种字体之间要用英文逗号隔开，如果有多个单词组成的字体要加引号，尽量使用系统默认的字体，保证任何用户在浏览器中都能正确显示

字体大小：font-size

单位：px（像素）em、rem、cm、mm、pt、pc

语法：

h1{font-size:24px;}
    h2{font-size:16px;}
    h3{font-size:2em;}
    span{font-size:12pt;}
    strong{font-size:13pc;}

px（像素）是网页常用的单位

谷歌浏览器默认的单位为16px，不同的浏览器默认显示的字号大小不一致，尽量给一个明确值

可以给body指定整个页面文字大小

字体粗细：font-weight

语法：

p{font-weight:bold;}

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>值</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td> normal </td> 
 <td> 默认值，定义标准的字体 </td> 
 </tr> 
 <tr> 
 <td> bold </td> 
 <td> 粗体字体 </td> 
 </tr> 
 <tr> 
 <td> bolder </td> 
 <td> 更粗的字体 </td> 
 </tr> 
 <tr> 
 <td> lighter </td> 
 <td> 更细的字体 </td> 
 </tr> 
 <tr> 
 <td> 100、200、300、400、500、600、700、800、900 </td> 
 <td> 定义由细到粗的字体 400等同于normal，700等同于bold </td> 
 </tr> 
 </tbody> 
</table>

字体样式：font-style

语法：

p{font-style:normal;}

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>属性值</td> 
 <td>作用</td> 
 </tr> 
 <tr> 
 <td>normal</td> 
 <td>默认值，浏览器会显示标准的字体样式:font-style:normal</td> 
 </tr> 
 <tr> 
 <td>italic</td> 
 <td>浏览器会显示斜体的样式</td> 
 </tr> 
 <tr> 
 <td>oblique</td> 
 <td>倾斜的字体样式</td> 
 </tr> 
 </tbody> 
</table>

字体符合属性

字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

p span{font:oblique bold 12px "楷体";}

使用font属性时，必须按上面的语法格式书写，不能更换顺序，并且各个属性以空格隔开

不需要设置的属性可省略，但必须保留font-size和font-family属性，否则font属性将不起作用

#### 2、文本样式 ####

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>含义</td> 
 <td>示例</td> 
 </tr> 
 <tr> 
 <td> color </td> 
 <td> 设置文本颜色 </td> 
 <td> color:#00C; </td> 
 </tr> 
 <tr> 
 <td> text-align </td> 
 <td> 设置元素水平对齐方式 </td> 
 <td> text-align:right; </td> 
 </tr> 
 <tr> 
 <td> text-indent </td> 
 <td> 设置首行文本的缩进 </td> 
 <td> text-indent:20px; </td> 
 </tr> 
 <tr> 
 <td> line-height </td> 
 <td> 设置文本的行高 </td> 
 <td> line-height:25px; </td> 
 </tr> 
 <tr> 
 <td> text-decoration </td> 
 <td> 设置文本的装饰 </td> 
 <td> text-decoration:underline; </td> 
 </tr> 
 </tbody> 
</table>

文本颜色：color

p{
    	color: red;
    }

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>表示</td> 
 <td>属性值</td> 
 </tr> 
 <tr> 
 <td>预定义颜色</td> 
 <td>red；green；blue等</td> 
 </tr> 
 <tr> 
 <td>十六进制</td> 
 <td>#FFFFFF；#FF0000；等</td> 
 </tr> 
 <tr> 
 <td>rgb</td> 
 <td>rgb(255,0,0)或rgb(100%,0%,0%)</td> 
 </tr> 
 </tbody> 
</table>

水平对齐方式：text-align

p{
    	text-align:right;
    }

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>属性值</td> 
 <td>解释</td> 
 </tr> 
 <tr> 
 <td>left</td> 
 <td>左对齐</td> 
 </tr> 
 <tr> 
 <td>right</td> 
 <td>右对齐</td> 
 </tr> 
 <tr> 
 <td>center</td> 
 <td>剧中对齐</td> 
 </tr> 
 <tr> 
 <td>justify</td> 
 <td>两端对齐</td> 
 </tr> 
 </tbody> 
</table>

文本首行缩进：text-indent

p{
    	text-indent: 2em;
    }

em是相对单位，就是当前元素（font-size）1个文字的大小，如果当前文字没有设置大小，则会按照父元素的1个文字大小

文本行高：line-height

p{
    	line-height: 10%;
    }

文本装饰：text-decoration

p{
    	text-decoration: underline;
    }

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>属性值</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td> none </td> 
 <td> 默认值，定义的标准文本（常用） </td> 
 </tr> 
 <tr> 
 <td> underline </td> 
 <td> 设置文本的下划线（常用） </td> 
 </tr> 
 <tr> 
 <td> overline </td> 
 <td> 设置文本的上划线（不常用） </td> 
 </tr> 
 <tr> 
 <td> line-through </td> 
 <td> 设置文本的删除线（不常用） </td> 
 </tr> 
 </tbody> 
</table>

文本阴影：text-shadow

语法：**text-shadow : color（颜色） x-offset（x轴位移，阴影水平位移量） y-offset （y轴位移，阴影垂直位移量） blur-radius（阴影模糊半径，阴影向外的模糊范围）;**

**示例：**

p{
    	text-shadow : gray 3px 3px 1px;
    }

#### 3、css超链接 ####

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>名称</td> 
 <td>含义</td> 
 <td>示例</td> 
 </tr> 
 <tr> 
 <td>a:link</td> 
 <td> 未单击访问时超链接样式 </td> 
 <td> a:link{color:#9ef5f9;} </td> 
 </tr> 
 <tr> 
 <td>a:visited</td> 
 <td> 单击访问后超链接样式 </td> 
 <td> a:visited {color:#333;} </td> 
 </tr> 
 <tr> 
 <td>a:hover</td> 
 <td> 鼠标悬浮其上的超链接样式 </td> 
 <td> a:hover{color:#ff7300;} </td> 
 </tr> 
 <tr> 
 <td>a:active</td> 
 <td> 鼠标单击未释放的超链接样式 </td> 
 <td> a:active {color:#999;} </td> 
 </tr> 
 </tbody> 
</table>

设置伪类的顺序：a:link->a:visited->a:hover->a:active

示例：html

css

a:link{
    	color: darkblue;
    }
    a:visited{
    	color: black;
    }
    a:hover{
    	text-decoration: underline;
    	color: blue;
    }
    a:active{
    	color: red;
    }

#### 4、css背景样式 ####

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>background-color</td> 
 <td>背景颜色</td> 
 </tr> 
 <tr> 
 <td>background-image</td> 
 <td>背景图像</td> 
 </tr> 
 <tr> 
 <td>background-repeat</td> 
 <td>背景重复方式</td> 
 </tr> 
 <tr> 
 <td>background-position</td> 
 <td>背景定位</td> 
 </tr> 
 <tr> 
 <td>background</td> 
 <td> 背景简写 </td> 
 </tr> 
 <tr> 
 <td>background-rgba(0,0,0,0.3)</td> 
 <td>背景半透明(必须为四个值)</td> 
 </tr> 
 </tbody> 
</table>

背景图像：background-image

background-image:url(图片路径);

背景颜色：background-color

body{
    	background-color: aquamarine;
    }

背景重复方式：background-repeat

body{
    	background: url(../image/arrow-right.gif) repeat-x;
    }

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>repeat</td> 
 <td>沿水平和垂直两个方向平铺</td> 
 </tr> 
 <tr> 
 <td>no-repeat</td> 
 <td> 不平铺，即只显示一次 </td> 
 </tr> 
 <tr> 
 <td>repeat-x</td> 
 <td>只沿水平方向平铺</td> 
 </tr> 
 <tr> 
 <td>repeat-y</td> 
 <td>只沿垂直方向平铺</td> 
 </tr> 
 </tbody> 
</table>

背景定位：background-position

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>值</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td> Xpos&nbsp; Ypos </td> 
 <td> 单位：px， Xpos表示水平位置，Ypos表示垂直位置 </td> 
 </tr> 
 <tr> 
 <td> X%&nbsp; Y% </td> 
 <td> 使用百分比表示背景的位置 </td> 
 </tr> 
 <tr> 
 <td> X、Y方向关键词 </td> 
 <td> 水平方向的关键词：left、center、right 垂直方向的关键词：top、center、bottom </td> 
 </tr> 
 </tbody> 
</table>

body{
    	background: url(../image/arrow-right.gif) no-repeat 100px 100px;
    }

#### 5、线性渐变 ####

颜色沿着一条直线过渡：从左到右、从右到左、从上到下等

圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

语法：

linear-gradient ( position,  color1,  color2,…)

示例：

div{
    	height: 100px;
    	width: 100px;;
    	background: linear-gradient(to bottom,red,orange,yellow,green,cyan,blue,purple);
    }