css
css样式
HTML:定义网页的结构
CSS:美化网页
一 CSS介绍:
层叠样式表(Cascading Style Sheets,简称CSS),是一种用来美化网页的计算机语言。
使用层叠样式表的好处:
1 使得网页内容与网页表现分离
2 可以同时多一个或多个元素进行样式化,极大提高了工作效率
二 使用方式(3种):
1 在<head></head>间加style标签,并在里面进行配置
注意:一个HTML文件可以有零个或多个style标签。s
ps:div是自己定义的
2 引入外部CSS文件
第一步:创建一个CSS文件
第二步:在CSS文件里面进行配置
第三步:在HTML中引入CSS文件
3 在元素的style属性中编写CSS
所有元素都可以指定style属性
一般而言,所有样式会根据以下规则层叠在一个虚拟的样式表中,其中数字4拥有最高优先级。
优先级 |
规则 |
1 |
浏览器缺省设置 |
2 |
外部样式表 |
3 |
内部样式表(位于<head>标签内部) |
4 |
内联样式表(位于HTML元素内部) |
三 CSS注释
HTML的注释:<!-- 注释内容 --->
CSS的注释:/*注释的内容*/
四 CSS选择器
CSS语法由三部分组成:选择器、属性和值。选择器 (selector) 通常是你希望定义的HTML元素或标签,属性(property)是你希望改变的属性,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明。例如:
上面的CSS代码的作用是将body元素内的文字颜色设置为蓝色。其中,body是选择器,而包括在花括号内的的部分是声明。声明依次由两部分构成:属性和值,color为属性,blue为值。
1 标签选择器
标签选择器就是根据元素的名字查找元素并进行样式化,其定义格式:
tag_name { 样式列表… }
2 类选择器
选择器就是根据元素的class属性查找元素并进行样式化,其定义格式:
.class_name { 样式列表… }
3 ID选择器
ID选择器就是根据ID属性查找元素并进行样式化,其定义格式:
#ID { 样式列表… }
注意选择器的优先级:
ID选择器的优先级比Class选择器的优先级高,而Class选择器比标签选择器的优先级高。
4 交集选择器
交集选择器就是对选择器1中的选择器2进行样式化,其定义格式:
选择器1 选择器2 … { 样式列表… }
5 并集选择器
并集选择器就是同时对多个选择器进行样式化,其定义格式:
选择器1, 选择器2, … { 样式列表… }
6 通用选择器
通用选择器就是对所有元素进行样式化,其定义格式:
* { 样式列表… }
通用选择器一般用于指定页面的默认样式。注意:通用选择器的优先级最低。
7 伪类选择器
伪类选择器是对元素处于某一个特定状态进行样式化。
元素的状态:
:link |
未访问状态,只对a标签有效 |
:visited |
已访问状态,只对a标签有效 |
:hover |
鼠标划过时候的状态 |
:active |
鼠标选定时候的状态 |
案例:定义一个表格,当鼠标移动到每一行的时候,该行的背景色就变成黄色(background-color:yellow)
五 CSS属性
1 背景属性
背景相关的CSS属性如下表所示
1) background-colorbackground-color用于指定背景颜色。它的值可以是:
尽管在大多数情况下没有必须使用 transparent。不过如果您不希望某元素拥有背景色,同时又不希望用户对浏览器的颜色设置影响到您的设计,那么设置 transparent值还是有必要的。
2) background-image
background-image用于为元素指定背景图像。例如:
上面代码指定了整个网页的背景图像为eg_bg_04.gif。理论上可以为任何的HTML元素指定背景颜色。
3) background-repeat
background-repeat用于设置背景图像是否平铺。它的值可以是:
repeat-x |
图像在水平方向上重复 |
repeat-y |
图像在垂直方向上重复 |
no-repeat |
不允许图像在任何方向上平铺 |
4) background-position
background-position用于指定背景图像的位置。为background-position属性提供值的方法有许多种。
1. 可以是关键字:top、bottom、left、right和center。通常,这些关键字会成对出现,例如:left top(图像放置在元素内边距的左上角)。如果只出现一个关键字,则认为另一个关键字是 center。
2. 可以是长度值,例如:50px 100px(图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上)。
3. 可以是百分比,例如:50% 50%(图像的左上角放置在元素内边距的中心)。
2 字体和文本属性
属性 |
描述 |
font-size |
设置字体的大小 |
font-weight |
设置字体的重量,例如:字体加粗bold |
text-indent |
设置文本缩进的距离,它的值可以像素px、字体的尺寸em或百分比 |
text-align |
设置文本的对齐方式;它的值可以是:left(左对齐)、居中(center)、右对齐(right)、两端对齐(justify) |
text-decoration |
设置文本修饰 |
letter-spacing |
设置文本内容的距离 |
text-transform |
处理文本的大小写,它的值可以是:none、uppercase(大写)、lowercase(小写)、capitalize(驼峰) |
1) font-size
font-size属性用于设置字体的尺寸。它的值可以是:
2) font-weight
font-weight用于设置文本的粗细。它的值可以是:
注意:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
3) text-indent
text-indent用于设置文本块中首行文本的缩进。如果使用负值,那么首行会缩进到左边。它的值可以是:
4) text-align
text-align用于设置文本的对齐方式。它的值可以是:
left |
左对齐 |
right |
右对齐 |
center |
居中对齐 |
justify |
水平两边对齐 |
5) text-decoration
text-decoration用于给文本添加修饰。它的值可以是:
注意:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。IE、Chrome 或 Safari 不支持 "blink" 属性值。
6. letter-spacing
letter-spacing用于修改字符或字母之间的间隔。正数代表增加间隔,负数代表减少间隔。
7) text-transform
text-transform用于处理文本的大小写。它的属性值有:
默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的首字母大写。
3 表格样式
表格属性用于设置表格布局。表格属性有:
注意:border-collapse和border-spacing属性不能够同时存在。
4 边框样式
边框样式用于设置元素边框的宽度、颜色和风格,其主要属性有:
border-width |
设置元素边框的宽度 |
border-color |
设置元素边框的颜色 |
border-style |
设置元素边框的风格,它的值有:solid(实线)、dotted(点线)、dashed(虚线)、double(双线) |
另外,CSS还允许对元素的各条边设置边框样式,如下表所示:
border-left-width |
设置元素左边框的宽度 |
border-left-color |
设置元素左边框的颜色 |
border-left-style |
设置元素左边框的风格 |
border-right-width |
设置元素右边框的宽度 |
border-right-color |
设置元素右边框的颜色 |
border-right-style |
设置元素右边框的风格 |
border-top-color |
设置元素上边框的颜色 |
border-top-style |
设置元素上边框的风格 |
border-top-width |
设置元素上边框的宽度 |
border-bottom-color |
设置元素下边框的颜色 |
border-bottom-style |
设置元素下边框的风格 |
border-bottom-width |
设置元素下边框的宽度 |
除此以外,CSS还允许把元素边框的宽度、颜色、风格合在一起设置,如下表所示:
border-left |
设置元素左边框的宽度、颜色或风格 |
border-right |
设置元素右边框的宽度、颜色或风格 |
border-top |
设置元素上边框的宽度、颜色或风格 |
border-bottom |
设置元素下边框的宽度、颜色或风格 |
5 盒子模型
盒子模型用于处理元素内容、内边距、边距和外边距。
1) 内边距padding
内边距就是内容与边框之间的距离。内边距的边缘是边框,如下图所示:
内边距的CSS样式:
padding |
设置内边距 |
padding-left |
设置左内边距 |
padding-right |
设置右内边距 |
padding-top |
设置上内边距 |
padding-bottom |
设置下内边距 |
2) 外边距margin
外边距是指边框以外的部分。外边距默认是透明的,因此不会遮挡后面的任何元素。
外边距的CSS样式:
margin |
设置元素的外边距 |
margin-left |
设置元素的左外边距 |
margin -right |
设置元素的右外边距 |
margin -top |
设置元素的上外边距 |
margin -bottom |
设置元素的下外边距 |
注意:外边距可以是正数,也可以是负数。
温馨提示:在CSS中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的尺寸。例如:假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,看下图:
6 属性定位
元素定位就是把HTML元素放在页面的某一个位置。CSS有三种定位类型:普通流、浮动和绝对定位。除非专门指定,否则所有元素都是在普通流中定位。也就是说,所有元素的位置都是由元素在HTML中的位置决定。
指定元素的定位类型的CSS属性:
position |
指定定位类型。它的值有:absolute(绝对定位)、relative(相对定位)、fixed(固定定位) |
left |
指定元素左上角的横坐标 |
top |
指定元素左上角的纵坐标 |
1) 相对定位
相对定位可以这样理解:如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
例如:如果将元素的top属性设置为20像素,left属性设置为 30像素,那么就会在原位置顶部下面创建20像素的空间,左边创建30像素的空间,也就是将元素向右下方向移动,如下图所示:
注意:在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
2) 绝对定位
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同。普通流中其它元素的布局就像绝对定位的元素不存在一样。
例如:
上面设置框2为绝对定位,left为30像素,top为20像素。由于使用绝对定位,框2原来的位置被删除,因此框3会移动到框1后面。
3) 固定定位
与绝对定位一样,使用固定定位的元素在页面中也不占据空间。但是,固定定位不会随着页面的滚动而滚动。
4) 浮动定位
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
例如:下图把框1向由浮动。所以可以看到,右图的框2和框3会向上移动,占据框1原先的空间。
例如:1)下面左图框1向左浮动,所以框2和框3会占据框1原先空间。但是由于框1浮动起来,所以,框1会覆盖框2。2)右图把三个框都向左浮动,可以看到框2的左边框碰到框1右边框,框3的左边框碰到框2的右边框,三个框呈现水平排列。
但是,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
今天要学习的内容
1.掌握表单标签的用法
2.了解CSS的作用
3.了解常见的CSS选择器
4.掌握常用的CSS样式:背景、字体和文本、表格、边框、盒子模型、定位