03-css属性-CSDN博客

本文链接：https://blog.csdn.net/2401_86400095/article/details/141821768

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

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

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

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

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

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

二、 在HTML中引入CSS样式

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

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

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

把css代码写在的

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

1. 链接外部样式表

(1) 把css代码单独保存在扩展名为 .css的样式表文件下。在css文件中不需要

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

2. 导入外部样式表

在HTML网页中的标签中的**

链接式与导入式：

	链接式	导入式
相同点	本质都是将一个独立的css样式表引用到HTML页面中
不同点	<link/>标签属于XHTML范畴	而@import是css2.1中特有的【不支持】
不同点	在网速慢的效果下也会一点点显示出来	网速慢不好使，黑白

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设置字体样式

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

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 属性的值

值	说明
normal	默认值，定义标志的字体400
bold	粗体字体700
bolder	更粗的字体
lighter	更细的字体

5. 字体属性

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

中文	英文
楷体	regular script
宋体	Song typeface
隶书	the Han Dynasty
黑体	black body

n 使用CSS排版网页文本

文本属性

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

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的常用值

值	说明
none【常用】	默认值，定义的标准文本
underline【常用】	下划线
overline	上划线
line-through	删除线
blink	设置文本闪烁，只在火狐有效，IE无效

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

p img {vertical – align : middle ; }

文字

(二) 使用CSS设置超链接

n 超链接伪类

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

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

a:hover{ color ：# 61E461 ;}

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

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

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

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

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

cursor属性常用值

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

(三) 背景样式

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

² 设置页面中id名称为 header的

的宽和高，（控制网页元素宽、高的两个属性）#header {

width : 200px;

height : 280px;

}

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

1. 背景颜色

在CSS中，使用background-color属性设置字体、

、列表等 网页元素的背景颜色，它有一个特殊的值： 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用来设定图像在背景中的位置，其属性对应的取值：

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