CSS层叠样式表（一）

最新推荐文章于 2023-08-02 16:48:42 发布

zhurisoft2006

最新推荐文章于 2023-08-02 16:48:42 发布

阅读量578

点赞数

本文链接：https://blog.csdn.net/zhurisoft2006/article/details/72808427

版权

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、oblique
font-weight	字体的粗细	normal、bold
font-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-repeat
background-attachment	设置滚动	Scroll ， Fixed(背景固定)
background-position	背景图案的初始位置	百分数、长度值、top、left、right、bottom、center等
background	合集	color image repeat attachment position

zhurisoft2006

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS层叠样式表（一）

一、概念上课案例下载CSS（层叠样式表）：用于控制网页的表现优点：实现表现和内容相分离（方便维护、错误修改、界面调整更加容易）便于页面风格的统一和修改（样式重用、高效率开发）简化网页，提高页面浏览速度（减少文件量，降低服务器带宽成本，加快网页解析速度，有利于SEO）二、在html中使用css的四种方法1、行内样式：混合在HTML标
复制链接

扫一扫