03-css属性

小灰灰 2022-05-23 10:08 153阅读 0赞

一、 **CSS的基本语法**

css规则由选择器与声明构成。

选择器**属性值**

h1\{

**font – size : 12px ;**

**color : \#F00 ;**

\} 声明

n <style>标签为HTML文档定义**样式信息**

n 在css中最基本的3种选择器：**标签选择器、类选择器和ID选择器**。

1. 标签选择器

css标签选择器用来声明 HTML中那些标签的。

2. 类选择器【可以在页面中使用很多次】

**.**类名称\{ \} <标签名 class = “类名称”>标签内容</标签名>

3. ID选择器【使页面代码具有非常高的可读性】

①它只适用于HTML页面中，因此它的针对性很强。

②同一个ID选择器在同一个页面中只能使用一次。

二、 **在HTML中引入CSS样式**

1. **行内样式【单行情况下推荐使用】**

使用style属性设置css样式仅对当前的HTML标签起作用，并且写在HTML标签中，这种形式不能使内容与表现分离。

2. **内部表样式【单一网页推荐使用】**

把css代码写在<head>的<style>的标签中，与HTML内容位于同一个HTML文件中。优点：方便在同页面中修改样式。缺点：但不利于在多页面间共享复用代码，对内容与样式的分离不够彻底。

3. ***外部样式表***【就近原则】【推荐使用】

1. 链接外部样式表

(1) 把css代码单独保存在扩展名为 .css的样式表文件下。在css文件中**不需要<style>标签**，**直接编写样式**即可。

(2) 在HTML中直接使用<link/>标签引用扩展名为.css样式表文件

2. 导入外部样式表

在HTML网页中的<head>标签中的**<style>**标签中导入外部样式列表。

<!--

@import url (“\_\_\_.css”) ;

\-->

链接式与导入式：

<table> 
 <tbody> 
 <tr> 
 <td>&nbsp;</td> 
 <td>链接式</td> 
 <td>导入式</td> 
 </tr> 
 <tr> 
 <td>相同点</td> 
 <td colspan="2">本质都是将一个独立的css样式表引用到HTML页面中</td> 
 </tr> 
 <tr> 
 <td>不同点</td> 
 <td>&lt;link/&gt;标签属于XHTML范畴</td> 
 <td><a href="mailto:%E8%80%8C@import%E6%98%AFcss2.1" rel="nofollow">而@import是css2.1</a>中特有的【不支持】</td> 
 </tr> 
 <tr> 
 <td>在网速慢的效果下也会一点点显示出来</td> 
 <td>网速慢不好使，黑白</td> 
 </tr> 
 </tbody> 
</table>

n 样式优先级：

Ø 行内样式>内部样式表>外部样式表【就近原则】

n 选择器优先级：

Ø ID选择器>类选择器>标签选择器

(一) **CSS的高级应用**

n **css复合选择器**

1. **后代选择器（常用）**

写法：把最外层的标签写在前面，内层的标签写在后面，用空格分开。当标签发生**嵌套**时，内层的标签就为外层标签的**后代**。

**在HTML标签嵌套时：**

(1) 按标签的嵌套关系，直接按标签的嵌套关系编写。

(2) 按选择器的嵌套关系，eg:  .a  .b 或 .a  \#b（直接按样式的嵌套关系编写）

(3) \#a .b 或 \#a b

2. **交集选择器（不常用）**

第一个必须是标签选择器，第二个必须是**类选择器**或者**ID选择器**，两个选择器之间**不能有空格**，必须**连续书写**。这种方式的选择器，将选中同时满足后两者定义的元素，也就是前者所定义的标签类型，并且制定了后者的类型或者id的元素，故~~~。

p空格.txt\{color:red ;\}后代选择器

p.txt\{color:blue ; line-height:28px ;\}交集选择器

3. **并集选择器**

它的结果是同时选中各个基本选择器所选择的范围。任何形式的选择器（3个）都可以作为并集选择器的一部分。

n **css继承特性**

将HTML标签看作一个个容器，其中被包含的小容器会继承包含它的大容器的风格样式，也称包含与被包含的标签为父子标签，即**子标签会继承父标签的风格样式**。

** **

**第5章 CSS美化网页元素 2014/9/13**

(一) 使用css美化网页文本的意义：

Ø 有效地传递页面信息

Ø 使页面更漂亮、美观，吸引用户

Ø 可以更好地突出页面主题内容

Ø 具有良好的用户体验

n ****是一个重要的编辑文本的标签，用来被组合HTML文档中的行内元素，它没有固定的格式表示。

n 使用css为标签添加样式，可以使用那3种选择器。

n **使用CSS设置字体样式**

<table> 
 <tbody> 
 <tr> 
 <td>属性名</td> 
 <td>含义</td> 
 </tr> 
 <tr> 
 <td>font-family</td> 
 <td>类型</td> 
 </tr> 
 <tr> 
 <td>font-size</td> 
 <td>大小</td> 
 </tr> 
 <tr> 
 <td>font-style</td> 
 <td>风格</td> 
 </tr> 
 <tr> 
 <td>font-weight</td> 
 <td>粗细</td> 
 </tr> 
 <tr> 
 <td>&nbsp;font</td> 
 <td>在一个声明中，设置所有字体属性，&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font : italic bold 36px “宋体”;</td> 
 </tr> 
 </tbody> 
</table>

1. 字体类型font-family （英文/中文）

² a \{font-family:Verdana,”楷体”;\}

² b \{ font-family: Times, "Times New Roman", "楷体"\}

² 英文字体放在中文字体前

2. 字体大小font-size【px】

其它的单位：in、cm、mm、pt、pc

3. 字体风格font-style

font-style属性有三个值：normal（默认）、italic（斜体可以理解成Italic是**使用文字的斜体**，）和oblique（是让**没有斜体属性**的文字倾斜）

4. 字体的粗细font-weight 属性的值

<table> 
 <tbody> 
 <tr> 
 <td>值</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>normal</td> 
 <td>默认值，定义标志的字体400</td> 
 </tr> 
 <tr> 
 <td>bold</td> 
 <td>粗体字体700</td> 
 </tr> 
 <tr> 
 <td>bolder</td> 
 <td>更粗的字体</td> 
 </tr> 
 <tr> 
 <td>lighter</td> 
 <td>更细的字体</td> 
 </tr> 
 </tbody> 
</table>

5. 字体属性

顺序：字体风格 字体粗细 字体大小 字体类型

<table> 
 <tbody> 
 <tr> 
 <td>中文</td> 
 <td>英文</td> 
 </tr> 
 <tr> 
 <td>楷体</td> 
 <td>regular script</td> 
 </tr> 
 <tr> 
 <td>宋体</td> 
 <td>Song typeface</td> 
 </tr> 
 <tr> 
 <td>隶书</td> 
 <td>the Han Dynasty</td> 
 </tr> 
 <tr> 
 <td>黑体</td> 
 <td>black body</td> 
 </tr> 
 </tbody> 
</table>

n **使用CSS排版网页文本**

**文本属性**

<table> 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>含义</td> 
 </tr> 
 <tr> 
 <td>color</td> 
 <td>颜色</td> 
 </tr> 
 <tr> 
 <td>text-align</td> 
 <td>设置元素水平对齐方式</td> 
 </tr> 
 <tr> 
 <td>text-indent</td> 
 <td>首行文本的缩进</td> 
 </tr> 
 <tr> 
 <td>line-height</td> 
 <td>文本的行高</td> 
 </tr> 
 <tr> 
 <td>text-decoration</td> 
 <td>文本的装饰</td> 
 </tr> 
 </tbody> 
</table>

1. **文本颜色**（在font属性里面，颜色不能使用简写方式）

2. **水平对齐方式（**text-align**）**

**left(默认值) right**（把文本排到右边） **center（中间） justify**（实现两端对其的效果）

3. **首行缩进与行高**

p \{ text-indent:2em \}

first para... 
second long paragraph .

行高换算为像素：**字体的大小**（12px）\***行高**（line-height : 1.5 ;）=**像素**（18px）

4.  **文本装饰**

**text-decoration的常用值**

<table> 
 <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> 
 <tr> 
 <td>blink</td> 
 <td>设置文本闪烁，只在火狐有效，IE无效</td> 
 </tr> 
 </tbody> 
</table>

5. **垂直对齐方式【**经常用来图片与文字居中**】（top、bottom）**

**p img \{vertical – align : middle ; \}**

**<img src =“图片”/>文字**

(二) **使用CSS设置超链接**

n **超链接伪类**

n 超链接单机前和单机后的不同颜色，其实是超链接的伪类样式。所谓伪类，就是不根据名称、属性、内容而根据标签处于某种行为或状态时的特征来修饰样式。

n **基本语法“标签名：伪类名\{ 声明；\}”**

**a:hover\{ color ：\# 61E461 ;\}**

n **为了防止图片加上超链接后出现**边框**：通常会CSS文件开头加入“img \{ border : 0px ; \}”**

n **常用的超链接伪类【顺序】**

<table> 
 <tbody> 
 <tr> 
 <td>伪类名称</td> 
 <td>含义</td> 
 </tr> 
 <tr> 
 <td>a : link</td> 
 <td>未单击访问时超链接样式</td> 
 </tr> 
 <tr> 
 <td>a : visited</td> 
 <td>单击访问后超链接样式</td> 
 </tr> 
 <tr> 
 <td>a : hover</td> 
 <td>鼠标悬浮其上超链接样式</td> 
 </tr> 
 <tr> 
 <td>a : active</td> 
 <td>鼠标单击未释放的超链接样式</td> 
 </tr> 
 </tbody> 
</table>

在实际页面开发中，仅设置两种超链接样式，一种是超链接a标签选择器样式（超链接无下划线 text-decoration:none;），另一种是鼠标悬浮在超链接上（显示下划线）的样式。

n **使用CSS设置鼠标形状（浏览器之间有差异）**

**cursor属性常用值**

<table> 
 <tbody> 
 <tr> 
 <td>值</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>default</td> 
 <td>默认光标</td> 
 </tr> 
 <tr> 
 <td>pointer</td> 
 <td>超链接的指针span{ cursor：pointer ; }</td> 
 </tr> 
 <tr> 
 <td>wait</td> 
 <td>指示程序正在忙</td> 
 </tr> 
 <tr> 
 <td>help</td> 
 <td>指示可用的帮助</td> 
 </tr> 
 <tr> 
 <td>text</td> 
 <td>指示文本</td> 
 </tr> 
 <tr> 
 <td>crosshair</td> 
 <td>鼠标呈现十字状</td> 
 </tr> 
 </tbody> 
</table>

(三) **背景样式**

² **< div >标签可以把HTML文档分割成独立的、不同的部分。**

² **设置页面中id名称为 header的<div>的宽和高，（控制网页元素宽、高的两个属性）\#header \{**

**width : 200px;**

**height : 280px;**

**\}**

** **

n **背景属性在CSS中**背景包括**背景颜色**和**背景图像**两种方式。

1. **背景颜色**

在CSS中，使用background-color属性设置字体、<div>、列表等**网页元素**的背景颜色，它有一个特殊的值：**transparent**透明【默认值】

在CSS中的注释符号是  /\*\`\`\`\`\`\`\*/

2. **背景图像 (background-image属性)**

1） **background-image : url(图片路径)**相对路径

**background-image：none （不显示背景图像）少用**

2） **背景重复方式**

**background-repeat属性的4个值：（不平铺）**

Ø **repeat：沿水平与垂直两个方向平铺**

Ø **no-repeat：不平铺**

Ø **repeat-x：只沿水平方向平铺**（导航背景，标题背景）

Ø **repeat-y：只沿垂直方向平铺**（不常用）

3） **背景定位**

**background-position**用来设定**图像**在背景中的位置，其属性对应的取值：

<table> 
 <tbody> 
 <tr> 
 <td>值</td> 
 <td>含义</td> 
 <td>示例</td> 
 </tr> 
 <tr> 
 <td>Xpos &nbsp;Ypos</td> 
 <td>水平垂直（像素）</td> 
 <td>0px 0px（默认）无偏移&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30px &nbsp;40px（正向偏移，图像向下向右移动）</td> 
 </tr> 
 <tr> 
 <td>X% &nbsp;&nbsp;&nbsp;Y%</td> 
 <td>用%表示背景的位置</td> 
 <td>30% &nbsp;50%（垂直方向居中，水平方向偏移30%）</td> 
 </tr> 
 <tr> 
 <td>&nbsp;X、Y方向关键词</td> 
 <td>&nbsp;left、center、right &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top &nbsp;&nbsp;、&nbsp;&nbsp;&nbsp;center 、&nbsp;bottom</td> 
 <td>使用水平和垂直方向的关键词进行自由组合，如省略，则默认值为center，eg：left &nbsp;top（左上角）top （上方水平居中位置出现）</td> 
 </tr> 
 </tbody> 
</table>

3. **背景**

**背景样式的CSS属性也可以简写**

. a \{

background : \#C00  url(图片路径)  205px  10px  no-repeat ;

优点：可以减少代码量，在后期的CSS代码维护中非常方便。

n **设置超链接背景**

**超链接是网页中最基本的元素，任何页面的跳转、提交都会用到超链接。**

(四) **列表样式**

1. **list-style-type**属性设置**列表项标记**的类型

list-style-type ：none ;

list-style-type ：disc ;【实心】

list-style-type ：circle ;【空心】