PHP.9-HTML+CSS（三）-CSS样式

来源：互联网发布：spss 23 for mac 破解编辑：程序博客网时间：2024/05/22 13:28

CSS样式

CSS是Cascading Style Sheets的简写，它除了可以轻松设置网页元素的显示位置和格式处，甚至还能产生滤镜，图像淡化，网页淡入淡出的渐变效果。CSS就是要对网页的显示效果实现与Word一样的排版控制一个段落、字体、颜色、背景、边框等。

注：注释/* */里面不能再包含注释

1、CSS的四种设置方式

内联样式表：在HTML元素标签中使用style属性内联，在需要相同样式情况下，不适用

每个HTML标签都可以加样式，如下：

<span style="font-size:18px;"><span style="font-size:18px;"><body><p>aaaaa</p><p style="color:red;background-color:yellow;font-size:4cm;border:2px solid blue; text-align:center">bbbb</p><p style="color:red;background-color:yellow;font-size:4cm;border:2px solid blue; text-align:center">cccc</p><b style="color:blue">wwwwwww</b></body></span></span>

嵌入样式表：通过HTML的<style>标签将CSS嵌入到HTML中使用

可以控制整个页面的所有样式

<span style="font-size:18px;"><head><title>CSS嵌入样式</title><style>CSS嵌入样式</style></head</span>

外部样式表：将样式单独定义在一个后缀名为.css的文档中，并在HTML中通过link元素连接到HTML中使用。

多个页面都可以使用

<span style="font-size:18px;"><head><title>CSS样式</title><link rel="stylesheet" type="text/css" href="css/layout.css" /></head></span>

输入样式表：可以将一个样式文件输入到另外一个样式文件的中，或将一个样式文件输入到<style>元素中

@import url(css文件)【片段文件组合成完整CSS文件】
<span style="font-size:18px;">p {background-color:green;}@import url(one.css);@import url(two.css);@import url(three.css);</span>

优先级别：
内联的高于其它的，其它的和加载的顺序有关

2、样式选择器

Selector:当定义一条样式规则时，必须指定受这条样式规则作用的网页元素，在一条规则中定义的网页元素就是selector（选择器），也就是选择该样式规则作用于的网页元素。
1、HTML选择器

HTML有标签， CSS就用选择器
选择符就是赋予内部或外部样式表的名字
HTML的标签，用来改变一个指定标签的样式
任何一个元素都可以是一个CSS选择符

2、类选择器

同一个选择器能有不同的类，因而允许同一个元素有不同的样式定的方法
[tag].类名（类名是自定义的,如果不加tag则代表所有HTML元素）
<tag class=“类名类名1 类名2”> （同一个元素可以使用多个类，类名之间使用空格分开）

3、ID选择器

在HTML页面中， ID属性指定了某个单一元素，id属性就用来对单一元素定义单独样式
一个HTML页面中，ID属性值要唯一

4、关联选择器

关联选择器只不过是一个用空格隔开的两个或更多的单一选择器给成的字符串
因为层叠顺序的规则，它们的优先权比单一的选择符大
必须按关联关系使用，不能有反顺序
只要能保持关联关系就可以，不管是在多少层

5、组合选择器

为了减少样式表的重复声明，组合是允许的
只要使用英文逗号（,）隔开每个选择符就可以了

6、伪元素选择器

伪元素选择器是指对同一个HTML元素在不同的状态下的一种定义方式
目前只有a和p两处HTML元素可以使用

<a> 标签定义超链接，用于从一张页面链接到另一张页面。其最重要的属性是 href 属性，它指示链接的目标。
<p> 标签定义段落。

#使用时的语法
标签：伪元素 标签［.类名］：伪元素
a:link 没有任何运作前的状态
a:hover 光标移到到超链接上的状态
a:active: 选择超链接的状态
a:visited 访问过超连接的状态
p:first-letter 一个段落中首个字母的状态
P:first-line 一个段落中首行的状态
<style>a:link {color:green;font-size:1cm;}a:hover {color:red;font-size:2cm;}a:active {color:blue;font-size:2cm;}a:visited {color:yellow;font-size:1cm;} p:first-letter {color:red;font-size:3cm;}p:first-line {color:yellow;font-size:1cm;}</style></head><body><a href="http://www.yyyyy.com">yyyyyyyyyy</a><br><a href="http://www.xxxxx.com">xxxxxxxxxxxx</a><br><a href="http://www.zzzzz.com">zzzzzzzzzzzzzz</a><br><p>hhhhhhhhhhhhhhhhhhh<br>   uuuuuuuuuuuuuuuuuuu<br>   xxxxxxxxxxxxxxxxxxxxx<br>   </p> <p>hhhhhhhhhhhhhhhhhhh<br>   uuuuuuuuuuuuuuuuuuu<br>   xxxxxxxxxxxxxxxxxxxxx<br>   </p> </body>

##样式规则的继承

所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。

##样式规则的优先级

关联>ID选择器>CLASS选择器>HTML标签选择器

#################################################################################

如何下载页面中的css文件：http://www.daimami.com/HTML-CSS/188531.htm

#################################################################################

3、常见CSS的属性和值

1、字体
font: [ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体族科>
#根据值判断属性，最好按顺序输入

CSS中修饰字体的属性
属性
描述
属性值
font-family
字体族科
任意字体族科名称都可以使用例如Times、serif等，而且多个族科的赋值是可以使用的，中间用逗号分隔，以防止选择不存在的字体族科
font-size
字体大小
可以使用绝对大小、相对大小、长度或百分比
font-style
字体风格
normal（普通），italic（斜体）或oblique（倾斜）
font-weight
字体加粗
normal、bold、bolder或lighter等
font-variant
字体变形
normal（普通）或small-caps（小型大写字母）

2、文本

CSS中常见的控制文本的属性
属性
描述
属性值
letter-spacing
字母间隔
该值必须符合长度格式，允许使用负值
word-spacing
文字间隔
该值必须符合长度格式，允许使用负值
text-decoration
文字修饰
underline（下划线），overline（上划线），line-through（删除线），blink（闪烁），或默认地使用无
text-align
横向排列
left、right、center或justify
text-indent
文本缩进
该值必须是一个长度或一个百分比，若百分比则视上级元素的宽度而定
line-height
行高
可以接受一个控制文本基线之间的间隔的值。当值为数字时，行高由元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值

3、背景
background: <背景颜色> || <背景图象>|| <背景重复> || <背景附件>|| <背景位置>

CSS中常见的控制背景的属性

属性
描述
属性值
background-color
背景颜色
值和color属性值设定方式相同，或使用transparent（透明）值
background-image
背景图象
图片URL或none（无）
background-repeat
背景重复
repeat、repeat-x、repeat-y、no-repeat
background-attachment
背景附件
scroll（滚动）或fixed（固定）
background-position
背景位置
横向的关键字（left, center, right），纵向的关键字（top, center, bottom）百分比和长度也可用做安排背景图象的位置
页面优化
应用多个图标放到同一个图片里【可减少服务器请求次数，到达优化目的】

多个图标放到同一个图片里，通过定义某区块的背景定位，调用同一个图片中不同位置上的小图标，好处是可以减少对服务器的请求次数，从而加快页面的访问速度

4、位置
5、边框

a.边框属性

任何一个元素都可以设置边框
边框属性是用于设置一个元素边框风格、边框宽度、边框颜色的略写，可以一起设置4边的边框，也可对上边框、右边框、下边框和左边框单独设置。

b.边框风格属性

可以通过边框风格属性border-style设定上下左右边框的风格，该属性用于设置一个元素边框的样式，而且必须用于指定可见的边框。可以使用1到4个关键字，如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。
如果给出一个值，它将被运用到各边上。
如果两个或三个值给出了，省略了的值与对边相等
也可以分别使用border-top-style、border-bottom-style、border-left-style和border-right-style属性单独设置各边的风格
c.各边的风格使用的属性值

none：没有边框，无论边框宽度设为多大
dotted：点线式边框
dashed：破折线式边框
solid：直线式边框
double：双线式边框
groove：槽线式边框
ridge：脊线式边框
inset：内嵌效果的边框
outset：突起效果的边框
d.边框宽度属性

可以通过边框宽度属性border-width设定上下左右边框的宽度，该属性用1到4个值来设置元素的边界，值是一个关键字或长度，不允许使用负值长度。
如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。
如果只给出一个值，它将被运用到各边上。
如果两个或三个值给出了，省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。
也可以分别使用border-top-width、border-bottom-width、border-left-width和border-right-width属性单独设置各边的宽度。除了可以使用长度单位定值外，还可以用medium（是默认值）、thin（比medium细）或thick（比medium粗）值。
e.边框颜色属性

可以通过边框颜色属性border-color设定上下左右边框的颜色，可以使用1到4个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等
f.略写的边框属性

CSS属性border是边框属性的一个快捷的综合写法，是一个用于设置一个元素边框的宽度、式样和颜色的略写，它包含border-width，border-style和border-color属性。
边框属性border只能设置四种边框，也只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值，网页制作者必须用一个或更多的属性，如：上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。
鼠标光标属性

在网页中默认的鼠标指针只有两种，一种是最普通的箭头，另一种是当移动到链接上时出现的“小手”。但现在越来越多的网页都使用了CSS鼠标指针技术，当将鼠标移动到链接上时，可以看到多种不同的效果。CSS可以通过Cursor属性实现鼠标形状的改变，其属性可以是默认的鼠标形状default、小手形状hand、交叉十字crosshair、文本选择符号text、Windows的沙漏形状wait、带有问号的鼠标help以及move各个方向的箭头属性值。

6、列表【常用为样式自调】

CSS中常见的控制列表的属性
nl style：无序
ol style：有序

属性
描述
list-style-type
设定引导列表项的符号类型，可以设置多种符号类型，值为disc、circle、square等
list-style-image
使用图像作为定制列表符号
list-style-position
决定列表项目缩进的程度

7、其他

0 0