CSS层叠样式表（一）

来源：互联网发布：reversi java 编辑：程序博客网时间：2024/05/21 17:47

CSS（层叠样式表）：用于控制网页的表现

优点：

实现表现和内容相分离（方便维护、错误修改、界面调整更加容易）
便于页面风格的统一和修改（样式重用、高效率开发）
简化网页，提高页面浏览速度（减少文件量，降低服务器带宽成本，加快网页解析速度，有利于SEO）

1、行内样式：混合在HTML标记里使用，对每个元素单独定义样式

<p style="color:blue">文字</p>

虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置style属性，所以会寻致HTML页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，仍而寻致后期维护成本高。

2、页面内部样式：在HTML的头部标签<head>与</head>之间添加样式

<head>
    <style>
        p{color:blue;}
    </style>
</head>

如果一个网站页面很多，每一个文件都会变大，重用性差，后期维护难度不小，如果文件很少，CSS代码也不多，这种方式还是很不错的。

3、链入外部样式：把样式表保存为一个样式表文件，然后在页面中使用<link/>标签链接到这个CSS文件。

<head>
    <link rel="stylesheet" href="CSS文件URL" type="text/css" />
</head>

这种方式将HTML文件和CSS文件彻底分成两个或者多个文件，实现了页面框架HTML代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便，并且如果要保持页面风格统一，只需要把这些公共的CSS文件单独保存成一个文件，其他的页面就可以分别调用自身的CSS文件，如果需要改变网站风格，叧需要修改公共CSS文件就可以了，非常的方便，这才是我们html+CSS制作页面提倡的方式。

4、导入外部样式：导入样式和链接样式比较相似，采用import方式导入CSS样式表（可以将css分成小模块），但兼容性以及用户体验的问题，建议大家使用链接样式。import与link的具体区别

四种样式的优先级按照“就近原则”：行内样式>页面内部样式>链接样式>导入样式

选择符{属性1：值1；属性2：值2；……}

CSS选择器：

1、HTML标签选择器（HTML标记）：

h1{font-size:32px;}

HTML选择器很方便，但是一下就把整个页面的所有相应的标记都改变了样式，但是不好细节控制，显得不够灵活。

2、类选择器：允许同一元素有不同样式(通过选择类实现)

定义：

.redone{color:red;}

应用：

<h2 class="redone">标题</h2>
<p class="redone">段落</p>

3、id选择器：id选择器可以在html标记中定位元素，但是相同的id号只能使用一次，不能重复，这与class不同

定义：

#header{width:960px;border:1px solid #666;}

应用：

<div id="header">我的网站</div>

通用选择器：*表示所有的html标签

*{
    margin:0px;
    padding:0px;
}

选择器集体声明：

h1,h2,h3,h4,h5,h6{color:#900;}

选择器的嵌套（派生选择器）：通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

#div1 p a{color:#900;} /*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/

1、字体属性：

属性属性含义属性值font-family使用什么字体所有字体font-style字体是否斜体normal、italic、obliquefont-weight字体的粗细normal、boldfont-size字体的大小绝对大小/相对大小

说明：

1）不建议在font-family中设置超过宋体/黑体之外的字体,会导致未装字体的计算机显示不正常

由于中文文字的复杂性,点阵装的字体并不是全都适合于浏览器观看,因此推荐使用标准的宋体或微软雅黑用于中文文字的显示,如果需要其他装饰性字体,应当多使用图片方式来替代纯文本的显示.

2）字体大小的单位，绝对单位：in，cm，mm，pt；相对单位：em，ex，px，%；

2、文本属性：

属性
属性含义
属性值
color
设置文本颜色

text-indent
设置文本首行缩进
缩进值
text-align
文本对齐
left,right,center,justify
word-spacing
单词间距
间距值
letter-spacing
字母间距
间距值
text-decoration
文本修饰
none,underline,overline,line-through,blink
line-height
设置行高

3、背景属性

属性属性含义属性值background-color定义背景色颜色background-image定义背景图案图片路径例:body{background-image:url(.jpg)}background-repeat背景图案重复方式Repeat-x、Repeat-y、no-repeatbackground-attachment设置滚动Scroll ， Fixed(背景固定)background-position背景图案的初始位置百分数、长度值、top、left、right、bottom、center等background
合集
color image repeat attachment position

阅读全文

0 0

CSS层叠样式表（一）

一、概念上课案例下载

二、在html中使用css的四种方法

三、CSS的基本语法

四、CSS属性

CSS层叠样式表（一）

一、概念 上课案例下载

二、在html中使用css的四种方法

三、CSS的基本语法

四、CSS属性

一、概念上课案例下载