CSS基础1

来源：互联网发布：mac 磁盘工具 bootcamp 编辑：程序博客网时间：2024/04/29 03:33

css的优点：

①提高页面浏览速度

②缩短改版时间，降低维护费用

③更好的控制页面布局

④实现表现和结构、内容想分离

⑤更方便搜做引擎的

一、.在HTML中插入CSS

①外部样式表

<head><link  rel="stylesheet"  type="text/css"   href=样式表的URL“ /></head>

注：虽然外部样式表可以使用任何有效的文件名，但是推荐使用.css作为外部样式表文件的扩展名，以方便识别文件内容。

②嵌入式样式表

嵌入式样式表是用<style>元素将样式包含在网页内部的样式设置，其作用范围仅限于该网页，在<style>标签的两个标记之间的任何代码都被看作为样式定义

格式:

<style  type="text/css">....样式定义......</style>

③内嵌式样式表

大多数的HTML标记都含有一个style属性，允许指定在标记显示的样式，这种样式规则的定义方式成为内嵌样式

<h1 style="color:red;">红色标题列</h1>

二、CSS规则

1.语法

①声明分组

在一个声明块内，可以有多个声明，每个声明必须以分号隔开。例如：

p { padding :5px; magin : 1px}

②选择器分组

功能：用于指定样式规则影响的网页元素。当几个选择器共享共同的声明时，可以分组放在一起，避免重复，每个选择器必须以逗号分隔开。例如：

h1, h2, h3, h4{padding: lem;}#mian p,#main ul{padding-top: lem; }

③CSS注释

以/*开始，以*/结束。作用域：任何地方

2.文档树

3.选择器

①元素选择器p{}:最常见、最易理解、匹配网页上的任何HTML元素

em {color：blue；}

②类选择器.class

目标：一个元素的每个实例，类选择器可以被用于选择有某个class属性的仍然HTML元素，不考虑它们在文档树中的任何位置。格式为：

.类名 {属性：值；}

③ID选择器#id{}

与类选择器类似，它可以被用于选择有某个ID属性的任何HTML元素，不考虑它们在文档树中的任何位置。格式为：

#id名 {属性： 值；}

例如：

#navigation {width: 30px; color:  #333；}

④包含选择器div p{ }

用于选择在文档树中的一个元素的后代元素，例如：

<body><h1>Heading <em>here</em></h1><p>Lorem ipsum dolor<em>sit</em> amet.</p></body>

⑤通配符选择器*{ }

通配符选择器用于选择所有的元素。例如，下面的样式规则会将页面上所有的HTML元素格式化为蓝色，不管这些元素在文档树的哪个位置：

*  { color ： blue；}

⑥伪类选择器

a:link 未被访问前

a: visited 访问后

a:hover 光标放在其上

a:active获取焦点（被点击）

2.选择器的选择

①是否重复使用{是否用类选择器；是否用id选择器}

②组合选择器<p class="red big> font </p>

③id选择器比类下选择器更具体

三、格式化内容

1.属性单位：

①相对长度px：px是相对于浏览者的计算机屏幕分辨率来显示的

（大多数的网页制作图片为72px，即每英寸像素为：72，一英寸=2.54cm，一厘米=28像素，15*15的图片=142*420的像素图像）

em ：Ems: 当前字母中M字母的宽度

ex：Exes: 当前字母中X字母的高度

②颜色：

用户十六进制数组定义颜色，如：#fc0eab；

用0-255之间的整数值来设置，如color：rgb（128,0，128）

blue，red

③URL

具体格式：在“url”后紧跟一个括号，括号中是URL的地址，如果在地址中使用了括号、逗号、空格、单引号和双引号，那么就必须在整个地址的外面加上一对单引号或者双引号。地址可以是相对地址或绝对地址。

2.字体

①字体Font-family

可以定义多个字体，用逗号隔开，如果是多个字符，则用双引号组合

例如：

body {font-family: verdana, "Courier New",  Symbol , serif;}

②字重Font-weight

默认为normal 400

还有blod 700、bloder、lighter

900是最重的字

③大小Font-size

描述字体的大小

属性值为：绝对大小、相对大小、长度、百分比、

large，150%， 1.5em

3.文本属性

①横向对齐Text-align

可选属性值：left、right、center，向左对齐、向右对齐、居中对齐

②文本修饰text-decoration

可选属性值：none（默认）、underline下划线、overline上划线、line-through删除线、blink闪烁

③设置行高line-height

它可以是数字（字体大小的倍数）、长度、百分比和normal

4.字体颜色和背景

文本颜色color

背景颜色background-color

背景图片background-image

背景图片重复background-repeat (repeat、no-repeat、repeat-x、repeat-y)

四、样式继承

margin、padding、border、background不被继承

font-size被计算时继承与子元素

五、样式折叠

Step1:找到选择器匹配特定元素的所有声明

Step2:根据样式声明的重要性和来源进行优先级排序

Step3:按照特殊性排序

Step4:比较CSS顺序

0 0