CSS样式表_语法规则
CSS样式规则及字体样式
字体样式应用：
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>字体属性</title> <style>
可以通过escape() 来测试属于什么字体。
字体名称
英文名称
Unicode 编码
宋体
SimSun
\5B8B\4F53
新宋体
NSimSun
\65B0\5B8B\4F53
黑体
SimHei
\9ED1\4F53
微软雅黑
Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
p{ font-family:"微软雅黑";}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。
常用技巧：
1. 现在网页中普遍使用14px+。 2. 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。 3. 各种字体之间必须使用英文状态下的逗号隔开。 4. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。 5. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。 6. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
第6章Div标签与CSS样式表(4)-CSS语法
CSS是一种用来装饰HTML的标记集合。
CSS优点
❖ 其优点包括：
▪ 1：表现和内容相分离 将设计部分剥离出来放在一个独立样式文
件中，HTML文件中只存放文本信息。这样的页 面对搜索引擎更加友好。
▪ 2：简化了网页的格式代码，外部的样式表还会 被浏览器保存在缓存里，加快了下载显示的速 度，也减少了需要上传的代码数量 。
▪ 3：易于维护和改版 只要修改保存着网站格式的CSS样式表文件
就可以改变整个站点的风格特色。
❖ 级联样式表（CSS）里用到的许多CSS属性都与HTML 属性用法相似。
❖ 例：要用红色作为网页的背景色：
❖ 用HTML表达：
❖
<body bgcolor=“#FF0000”>
❖ 用CSS表达：
❖ body {background-color:#FF0000;}
❖ 常用的HTML标记： ❖ body ❖p ❖ table ❖ tr ❖ h1等
1.2 类别选择符
类别名称 .class 类别选择器
声明
声明
color: green;
font-size: 20px;
属性
值
属性
值
图2 类别选择器
class选择符-类选择符
❖ class选择符：在一个文档中可以为不同类型的元素定义相同的类 名，class可以实现把相同样式的元素统一为一类，使用class选择 符时要先为每个元素定义一个class属性：
❖ 通过CSS选择符来指定此HTML标签使用此CSS样式。 ❖ 选择符语法：一个CSS选择符就定义了一个样式 ❖ 选择符名称 ❖{ ❖ 声明 ; ❖}
css 嵌套语法
css 嵌套语法CSS嵌套语法CSS（Cascading Style Sheets）是一种用于描述网页外观样式的标记语言，而CSS嵌套语法是CSS中一种常用的语法方式，用于选择和样式化HTML元素的子元素、后代元素或特定的类别元素。
本文将详细介绍CSS嵌套语法的基本概念、用法和注意事项。
一、基本概念嵌套语法是指在CSS样式表中，将选择器放置在另一个选择器的内部，以选择和样式化特定的元素。
嵌套语法可以提高CSS代码的可读性和维护性，使样式表的结构更加清晰和有组织。
二、嵌套选择器的用法1. 选择子元素嵌套语法可以用于选择和样式化特定元素的子元素。
例如，要选择`<div>`元素内的所有`<p>`元素，可以使用以下嵌套选择器：```cssdiv p {/* 样式规则 */}```2. 选择后代元素嵌套语法还可以用于选择和样式化特定元素的后代元素。
后代元素是指嵌套在父元素内部的所有子元素、孙子元素、曾孙元素等。
例如，要选择`<div>`元素内的所有`<a>`元素，可以使用以下嵌套选择器：```cssdiv a {/* 样式规则 */}```3. 选择特定的类别元素嵌套语法还可以用于选择和样式化特定类别的元素。
例如，要选择类别为`"red"`的`<p>`元素，可以使用以下嵌套选择器：```cssp.red {/* 样式规则 */}```三、注意事项1. 避免选择器过于复杂使用嵌套语法时，应避免选择器过于复杂，以保持代码的可读性和性能。
过于复杂的选择器可能导致样式匹配的延迟和消耗过多的系统资源。
2. 避免选择器冲突当使用嵌套语法时，应注意选择器的层级关系，避免选择器冲突。
选择器冲突可能导致样式失效或样式被覆盖。
3. 合理使用嵌套语法嵌套语法虽然能提高代码的可读性，但过度使用嵌套语法可能导致代码冗长和维护困难。
因此，应合理使用嵌套语法，避免过度嵌套。
实习三 CSS基本语法
实习三CSS基本语法一、实验目的1. 了解XHTML；2. 掌握在网页中引用CSS 的方法；3. 掌握CSS 的基本语法规则；4. 掌握CSS 的常用选择器；5. 掌握使用Dreamweaver 定义CSS 的方法。
二、实验内容1. CSS 的引入和基本选择器应用；2. 利用CSS 对网页进行控制；3. 利用W3school 网站进行CSS 的练习。
三、实验步骤1.CSS 的引入和基本选择器应用；(1)内嵌样式表将定义的样式以<Style type=”text/css”>样式定义<Style>形式插入到文档的Head区，此种方法样式将影响当前整个页面。
建立网页Css1.htm，代码如下：<html><head><title>Css 技术的应用一</title><Style type=”text/css”>H1{color:red; Font-family:”华文行揩”,”宋体”;}Body{color:black;Font-size:9pt;}.fnt{color:blue;Font-family:”隶书”; Font-size:14pt;}</style></head><body><h1>这是标题一</h1>这是正文…..<p class=fnt>这是使用Fnt 类后的效果</body></html>(2) 行内样式将定义的样式以标记的属性形式插入，如：<P Style=”color:blue”>,此种方法样式只影响当前标记所影响的区域。
建立网页Css2.htm，代码如下：-8-<html><head><title>Css 技术的应用一</title><Style type=”text/css”>H1{color:red; Font-family:”华文行揩”,”宋体”;}Body{color:black;Font-size:9pt;}.fnt{color:blue;Font-family:”隶书”; Font-size:14pt;}</style></head><body><h1>这是标题一</h1>这是正文…..<p class=fnt>这是使用Fnt 类后的效果<p style=”color:tea;font-size:30”>这是中效果只使用于此段….</body></html>(3) 外部样式表将所有样式的信息存放在一个单独的文件中（扩展名为Css），然后用<LINK>把它链接到每个HTML 页面中。
scss样式语法
scss样式语法SCSS（Sassy CSS）是一种 CSS 预处理器，它引入了一些额外的功能，如变量、嵌套规则、混合、导入等，以提高 CSS 的可维护性和灵活性。
SCSS 是 CSS 的扩展，因此它的语法与 CSS 是兼容的，你可以逐步采用 SCSS，而无需一次性进行全面更改。
以下是一些 SCSS 的基本语法规则：1. 变量使用 $ 符号定义变量：$primary-color: #3498db;body {background-color: $primary-color;}2. 嵌套规则可以在父选择器内嵌套子选择器，以改善层次结构：nav {ul {margin: 0;padding: 0;list-style: none;}li { display: inline-block; }a {text-decoration: none;&:hover {border-bottom: 1px solid #ccc; }}}3. 混合定义可重用的样式块：@mixin border-radius($radius) {-webkit-border-radius: $radius;-moz-border-radius: $radius;-ms-border-radius: $radius;border-radius: $radius;}.button {@include border-radius(5px);}4. 导入通过 @import 导入其他 SCSS 文件：@import 'reset';@import 'variables';body {background-color: $background-color;color: $text-color;}5. 条件语句使用 @if、@else if 和 @else 实现条件样式：$theme: light;body {@if $theme == light {background-color: #fff;color: #333;} @else if $theme == dark {background-color: #333;color: #fff;} @else {// 默认主题}}6. 循环使用 @for 和 @each 实现循环：@for $i from 1 through 3 {.item-#{$i} {width: 100px * $i;}}$colors: #3498db, #e74c3c, #2ecc71;@each $color in $colors {.color-#{$color} {background-color: $color;}}这只是 SCSS 的一些基本语法。
css基本语法格式
css基本语法格式CSS（层叠样式表）的基本语法格式如下：1. 选择器（Selector）：选择器用于指定要应用样式的HTML元素。
选择器可以是元素名称、类名、ID、属性等。
例如：元素选择器，p、div、h1等。
类选择器，.classname.ID选择器，#idname.属性选择器，[attribute=value]2. 声明块（Declaration Block）：声明块包含一条或多条属性声明，用花括号{}括起来。
每个属性声明由属性名和属性值组成，中间用冒号:分隔。
例如：css.selector {。
property: value;property: value;}。
3. 属性（Property）：属性是要应用的样式特性，例如颜色、背景、字体等。
例如：颜色属性，color.背景属性，background-color.字体属性，font-size.4. 属性值（Value）：属性值是属性所具有的具体特性。
属性值可以是颜色、大小、字体等。
例如：颜色属性值，red、#000000、rgb(255, 0, 0)。
大小属性值，12px、1em、100%。
5. 分号（Semicolon），每个属性声明后面需要加上分号，用于分隔不同的属性声明。
6. 注释（Comments）：CSS中可以使用注释来对代码进行说明，注释以/开头，以/结尾。
例如：css./ 这是一个注释 /。
下面是一个简单的例子，展示了CSS的基本语法格式：css.selector {。
property: value;property: value;}。
请注意，以上只是CSS基本语法格式的简单介绍，CSS还有很多其他的语法规则和特性，可以根据具体需求进行深入学习和应用。
CSS基础语法
CSS基础语法1 CSS概述1.1 CSS的定义 全名：Cascading Style Sheets -> 层叠样式表 定义：CSS成为层叠样式表，它主要⽤于设置HTML页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局等外观显⽰样式。
CSS以HTML为基础，提供了丰富的功能（如字体、颜⾊、背景的控制以及整体排版等等），还可以针对不同的浏览器设置不同的样式。
(1) 层叠的概念 CSS—层叠样式表，层叠就是浏览器对多个样式来源进⾏叠加，最终确定结果的过程。
上图中有两个样式来源，第⼀个是引⽤的css1.css，第⼆个是⾃⼰在style中编写的样式。
“层叠”是个叠加的过程，可通过下图表⽰：层叠是CSS的核⼼机制，理解了它才能以最经济的⽅式写出最容易改动的CSS，让⽂档外观在达到设计要求的同时，也给⽤户留下⼀些空间，让他们根据需要更改⽂档的显⽰效果，例如调整字号。
(2) 层叠的规则 由于样式的来源不同，浏览器在加载样式时，需要计算出最终的样式值，这样才能显⽰出正确的界⾯效果——浏览器会通过叠加和覆盖这两种⽅式来⽣成最终的样式值。
如上图，不同来源的两个样式，第⼀个样式设置了font-weight，第⼆个没有，浏览器会把它叠加在⼀起，即浏览器会把各个零散的整合成⼀个整体。
第⼀个样式color:red，第⼆个样式color:blue，浏览器会让后者覆盖前者，最终结果还是color:blue。
覆盖的默认规则是后者覆盖前者，但是⼜⼀个特殊情况——!important。
如上图。
虽然color:blue是后来者，但是它没有居上，因为前者color:red跟着!important。
这就像得到⼀个尚⽅宝剑，有最⾼执⾏权，其他⼈统统让路，否则佛挡杀佛。
1.2 HTML、CSS与JS三者的关系 HTML：页⾯结构，负责从语义的⾓度搭建页⾯结构。
CSS：页⾯样式表现，负责从审美的⾓度美化页⾯。
css样式基本语法
css样式基本语法1. 基本语法CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。
基本格式如下：selector {property: value}（选择符 {属性：值}）选择符是可以是多种形式，⼀般是你要定义样式的HTML标记，例如BODY、P、TABLE……，你可以通过此⽅法定义它的属性和值，属性和值要⽤冒号隔开：body {color: black}选择符body是指页⾯主体部分，color是控制⽂字颜⾊的属性，black是颜⾊的值，此例的效果是使页⾯中的⽂字为⿊⾊。
如果属性的值是多个单词组成，必须在值上加引号，⽐如字体的名称经常是⼏个单词的组合：p {font-family: "sans serif"}（定义段落字体为sans serif）如果需要对⼀个选择符指定多个属性时，我们使⽤分号将所有的属性和值分开：p {text-align: center; color: red}（段落居中排列；并且段落中的⽂字为红⾊）为了使你定义的样式表⽅便阅读，你可以采⽤分⾏的书写格式：p { text-align: center; color: black; font-family: arial }（段落排列居中，段落中⽂字为⿊⾊，字体是arial）2. 选择符组你可以把相同属性和值的选择符组合起来书写，⽤逗号将选择符分开，这样可以减少样式重复定义：h1, h2, h3, h4, h5, h6 { color: green }（这个组⾥包括所有的标题元素，每个标题元素的⽂字都为绿⾊）p, table{ font-size: 9pt }（段落和表格⾥的⽂字尺⼨为9号字）效果完全等效于：p { font-size: 9pt } table { font-size: 9pt } 3. 类选择符⽤类选择符你能够把相同的元素分类定义不同的样式，定义类选择符时，在⾃定类的名称前⾯加⼀个点号。
style scss语法
style scss语法【原创版】目录1.概述2.语法规则3.变量4.嵌套规则5.注释6.实例正文1.概述SCSS（Sass 语法）是一种用于编写样式表的语言，它比传统的 CSS 更加简洁、易读和可维护。
SCSS 是 CSS3 的扩展，它允许使用变量、嵌套规则、函数和其他高级功能。
通过使用 SCSS，可以轻松地创建复杂的样式表，同时保持代码的整洁和易于理解。
2.语法规则SCSS 语法与 CSS 类似，但在 CSS 语法的基础上增加了一些特殊的语法规则。
以下是一些 SCSS 独有的语法规则：- 变量定义：使用 `$` 符号定义变量，如 `$font-size: 16px;`。
- 嵌套规则：使用 `>` 符号表示嵌套，如 `div > p`。
- 注释：使用 `//` 符号表示单行注释，使用 `/* */` 表示多行注释。
- 函数：SCSS 提供了许多内置函数，如 `mixin()`、`include()` 等。
3.变量在 SCSS 中，可以使用变量来定义常用值，以避免重复设置样式。
变量的定义方式如下：```scss$font-size: 16px;```之后，可以在任何选择器中使用这个变量：```scssp {font-size: $font-size;}```4.嵌套规则SCSS 支持嵌套规则，使得代码更易于阅读和理解。
嵌套规则的语法如下：```scssdiv > p {font-size: 14px;}```5.注释SCSS 支持单行注释和多行注释。
单行注释使用 `//` 开头，多行注释使用 `/* */` 包围。
css样式学习
1. 你可以将多个HTML文件都链接到一个中心样式表文件。
这个外部的样式表文件将设定你所有网页的规则。
如果你改变样式表文件中的额某一细节，所有页面都会随之改变。
如果你维护的站点很大，则这项功能绝对会有其用武之地。
它的使用方法：产生一个普通的网页，但不使用<STYLE>规则，而是在<HEAD>内使用<LINK>标签：<HTML> <HEAD> <TITLE>My First Stylesheet </TITLE> <LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css"> </HEAD> <BODY> <H1>Stylesheets: The Tool of the Web Design Gods</H1> <P>Amaze your friends! Squash your enemies!</P> </BODY> </HTML>(使用链接的样式表时，你无须使用注释标签。
)P B { color: red }<H1><B>Emma Thompson</B>, Actress </H1> <P>Dramatic actor, inspired comedienne. Is there <B>nothing</B> she can't do?</P>样式表的规则告诉浏览器只将所有<P>之内加重显示的文字以红色显示。
所以，<P>之外标题的加重文字不会以红色显示，而<P>之内的文字则是。
内嵌式css样式的语法格式
内嵌式css样式的语法格式内嵌式CSS样式是指将样式直接嵌入HTML文档的`<style>`标签中，而不是通过外部样式表引用。
以下是内嵌式CSS样式的基本语法格式：```html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1.0"><title>内嵌式CSS样式</title><style>/*在style标签内部编写CSS样式*//*选择器{属性:值;}*/body{font-family:Arial,sans-serif;background-color:#f0f0f0;color:#333;margin:0;padding:0;}h1{color:#007bff;}p{font-size:16px;line-height:1.5;}/*可以继续添加更多的样式规则*/</style></head><body><h1>这是一个标题</h1><p>这是一个段落，包含一些文本。
</p></body></html>```在上面的示例中，`<style>`标签内部包含了一些CSS样式规则，这些规则定义了页面的基本样式，如字体、颜色、边距等。
在实际应用中，你可以根据需要添加更多的样式规则。
这种方式使得样式和HTML文档紧密关联，适用于对特定页面的样式进行定制或调整的情况。
CSS 基础语法
CSS 基础语法CSS 语法CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是您希望设置的样式属性（style attribute）。
每个属性有一个值。
属性和值被冒号 分开。
selector {property: value}下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。
在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。
h1 {color:red; font-size:14px;}下面的示意图为您展示了上面这段代码的结构：提示：请使用花括号来包围声明。
提示：值的不同写法和单位除了英文单词 red，我们还可以使用十六进制的颜色值 #ff0000：p { color:#ff0000;}为了节约字节，我们可以使用 CSS 的缩写形式：p { color:#f00;}我们还可以通过两种方法使用 RGB 值：p { color: p { color:rgb(255,0,0);} }rgb(100%,0%,0%);请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。
但是在其他的情况下就不需要 这么做了。
比如说，当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什 么。
记得写引号提示：如果值为若干单词，则要给值加引号： 提示：p {font-family:"sans serif";}多重声明： 多重声明：提示： 提示：如果要定义不止一个声明，则需要用分号将每个声明分开。
下面的例子展示出如何定义一个红色 文字的居中段落。
行内式css样式的基本语法格式
行内式css样式的基本语法格式行内式css样式的基本语法格式非常简单和直观。
它允许开发人员改变单个HTML元素的属性值，而无需在头部信息中添加外部样式表或在HTML元素中添加类或ID。
下面是它的基本语法格式：```html<element style="property:value;">```在这个基本的语法格式中，“element”是HTML元素的名称，而“property”是它的CSS属性名称，“value”是该属性的值。
下面是一些示例代码：```html<p style="color:red;">这是一段红色文本。
</p><button style="background-color:green;color:white;">提交表单</button><img src="example.jpg" alt="示例图像"style="width:100%;height:auto;">```如上所示，每个元素只需要在其标记中包含一个行内样式属性，并将其设置为所需的值即可。
这些属性可以设置为一系列属性值，例如颜色、粗细、对齐方式、大小和字体类型等。
虽然行内样式是一种方便的方式来更改单个HTML元素的样式，但不建议在整个页面上过多使用，因为它们的使用会带来一些缺点。
例如，每个元素仅能修改一个CSS属性，而且行内样式会显著增加HTML文件的大小，降低网页的性能。
总的来说，行内样式是CSS的一种方便的形式，但其使用应当谨慎，在必要的时候才使用它。
scss 语法详解
scss，全称Syntactically Awesome Style Sheets，是一种基于CSS 的扩展样式表语言，它在CSS 的基础上增加了许多新的特性和更好的扩展性。
通过使用SSCS，你可以使用更丰富的选择器、变量、嵌套规则等，使CSS 代码更加易于阅读和维护。
一、SCSS 基础语法SCSS 的基本语法与CSS 非常相似，它使用类似于CSS 的语法来声明变量、定义颜色、添加媒体查询等。
此外，SCSS 还支持嵌套、混合（Mixins）、布局模块（Layout Modules）等功能，这些功能大大提高了CSS 的可重用性和可维护性。
二、选择器SCSS 选择器支持更多的选择方式，例如，可以使用自定义类名来标识HTML 元素，这使得CSS 代码更加清晰易读。
此外，SCSS 选择器还支持嵌套选择器，这使得CSS 代码更加紧凑和易于管理。
三、变量和嵌套规则SCSS 提供了变量功能，这使得你可以在多个地方重复使用相同的值，而不需要重复编写相同的代码。
嵌套规则允许你将一个CSS 规则嵌套在另一个规则中，这使得CSS 代码更加易于组织和维护。
四、混合和布局模块混合允许你将常用的CSS 规则组合在一起，并在多个地方重复使用它们。
这大大提高了CSS 代码的可重用性。
此外，SCSS 还支持布局模块功能，这使得你可以更加灵活地控制HTML 元素的布局。
五、响应式设计SCSS 支持媒体查询功能，这使得你可以创建适应不同屏幕尺寸的响应式设计。
通过使用媒体查询，你可以根据屏幕尺寸调整样式规则，从而创建出更加适应移动设备的用户体验。
六、调试和开发工具SCSS 提供了一些调试工具和开发工具，这使得开发人员更容易开发和调试CSS 代码。
例如，SCSS 支持CSS 预处理器常见的变量、混入、继承等功能，同时还支持LESS 和SASS 等预处理器。
这些工具可以帮助开发人员更高效地编写和调试CSS 代码。
总的来说，SCSS 是一种强大而灵活的CSS 扩展样式表语言。
CSS样式表
CSS样式表
CSS样式表又称层叠样式表；
一、单位:em(字体或者font-size的高度)；
二、css语法：css允许多次将一条规则赋予同一个元素，我们称之为竞争规则；
一个选择器可以有多个类或者是ID或者是类和ID都有，这样的话就有优先级的区别了，只有这样才有另一种效果；
上面的代码就很好的解释了这个优先级的效果；
三、I
D选择符在简化层叠后可覆盖所有的类、属性、伪类、元素和通配选择符；
HTML设计模式
四、选择符：选择符有很多种，其中有一类是表示一个段落的属性的，例如
p:first-letter{},p:first-line{};。
CSS-样式表
1.3.2 样式表的实例应用2：文本及列 表的应用
在【例5.6】中，文本和列表都应用了CSS样式，分别设置字体、 段落、列表的相关属性。第一行文本是标题1（标签为H1），第二 行文本是标题2（标签为H2），正文部分用了列表（标签为UL）。 1. 字体的样式设置
1.3.4 样式表的实例应用4：动态链接样式
简单的CSS链接样式可以在页面属性中的“链接”选项卡中设 置，1.1节中已经讲过。
在【例5.6】中，建立较为复杂的CSS链接样式，当鼠标经过链 接文字时，文字颜色会变色、字体样式变粗、出现背景颜 色、文字修饰有下划线等。这里还讲解两个重要的知识点： 如何建立CSS链接样式和如何调用外部CSS样式表。
2.编辑和删除CSS样式
创建CSS样式后，如果要修改CSS样式，在“CSS样式”面板 中，单击“CSS样式”面板右下角的“编辑”按钮，进入 “CSS规则定义”的对话框，可进行修改。
某个CSS样式不再需要时，在“CSS样式”面板中，首先选中 某个样式，单击CSS样式面板右下角的“删除”按钮。
1.3 CSS 样式的应用
1.1 利用CSS 样式表的网页实例
CSS样式表是由一系列样式选择器和CSS属性组成，它支持字体 属性、颜色和背景属性、文本属性、边框属性、列表属性以及精确 定位网页元素属性等，增强了网页的格式化功能。
使用CSS样式表的另一个优点是可以利用同一个样式表对整个站 点的具有相同性质的网页元素进行格式修饰，当需要更改样式设置 时，只要在这个样式表中修改，而不用对每个页面逐个进行修改， 简化了格式化网页的工作。
1.3.6 CSS样式进阶 利用CSS＋DIV进行网页布局的实例
css语法规则
css语法规则CSS语法规则CSS是一种用于网页设计的样式表语言，它可以为HTML文档添加样式和布局。
为了正确地使用CSS，我们需要遵循一些基本规则和语法。
下面是一个全面的、详细的CSS语法规则，以帮助您更好地掌握这门语言。
一、基本概念1. CSS指层叠样式表（Cascading Style Sheets）。
2. CSS样式定义了HTML元素的外观和布局。
3. CSS样式可以通过内部样式表、外部样式表或行内样式来定义。
4. CSS选择器用于选择要应用样式的HTML元素。
二、CSS语法1. CSS规则由选择器和声明块组成。
2. 选择器指定要应用样式的HTML元素。
3. 声明块包含一个或多个声明，每个声明由属性和值组成，属性与值之间使用冒号分隔，每个声明之间使用分号分隔。
4. 外部CSS文件必须以.css扩展名保存，并通过<link>标签在HTML 文档中引入。
5. 内部CSS可以在<head>标签中使用<style>标签来定义，并将其放置在<head>标签中间。
6. 行内CSS可以直接在HTML元素中使用style属性来定义。
三、CSS选择器1. 元素选择器：通过HTML元素名称来选择元素。
例如，p选择器会选择所有的段落元素。
2. ID选择器：通过HTML元素的ID属性来选择元素。
例如，#myid 选择器会选择ID为“myid”的元素。
3. 类选择器：通过HTML元素的class属性来选择元素。
例如，.myclass选择器会选择class为“myclass”的所有元素。
4. 属性选择器：通过HTML元素的属性来选择元素。
例如，[href]选择器会选择所有具有href属性的元素。
5. 伪类选择器：通过HTML元素的状态或位置来选择元素。
例如，:hover伪类可以在鼠标悬停在一个链接上时改变链接的颜色。
6. 组合选择器：将多个不同类型的CSS规则组合在一起，以便同时应用于一个或多个HTML元素。
3.CSS样式的三种使用方式
3.CSS样式的三种使⽤⽅式1.内链样式表内联样式，⼜有⼈称⾏内样式、⾏间样式、内嵌样式。
是通过标签的style属性来设置元素的样式，其基本语法格式如下：1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Title</title>6</head>7<body>8<h1 style="color: red;font-size: 28px">码海⽆际</h1>9</body>10</html>2.嵌⼊式样式表1. 内嵌式是将CSS代码集中写在HTML⽂档的head头部标签中，并且⽤style标签定义，其基本语法格式如下2. 语法中，style标签⼀般位于head标签中title标签之后，也可以把他放在HTML⽂档的任何地⽅。
3. type="text/css" 在html5中可以省略，写上也⽐较符合规范，所以这个地⽅可以写也可以省略。
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Title</title>6<style>7 h1 {8 color: red;9 font-size: 28px10 }11</style>12</head>13<body>14<h1>码海⽆际</h1>15</body>16</html>3.引⼊式样式引⼊式是将所有的样式放在⼀个或多个以.CSS为扩展名的外部样式表⽂件中，通过link标签将外部样式表⽂件链接到HTML⽂档中，其基本语法格式如下：先在同级⽬录下新建⼀个 test.css ⽂件，⾥⾯写⼊如下内容1 h1{2 color: red;3 font-size: 28px;4 }在html页⾯在引⼊1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Title</title>6<link rel="stylesheet" href="test.css">7</head>8<body>9<h1>码海⽆际</h1>10</body>11</html>4.三种样式表总结样式表优点缺点使⽤情况控制范围⾏内样式表书写⽅便，权重⾼没有实现样式和结构相分离较少控制⼀个标签（少）内部样式表部分结构和样式相分离没有彻底分离较多控制⼀个页⾯（中）外部样式表完全实现结构和样式相分离需要引⼊最多，强烈推荐控制整个站点（多）样式表优点缺点使⽤情况控制范围 1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Title</title>6<link rel="stylesheet" href="test.css">7</head>8<body>9<h1 style="color: blue">码海⽆际</h1>10</body>11</html>。
CSS基础知识及其基本语法
CSS基础知识及其基本语法⼀、什么是CSSCSS 是层叠样式表( Cascading Style Sheets ) 的简称。
有时我们也会称之为CSS 样式表或级联样式表。
CSS 也是⼀种标记语⾔CSS 主要⽤于设置HTML 页⾯中的⽂本内容（字体、⼤⼩、对齐⽅式等）、图⽚的外形（宽⾼、边框样式、边距等）以及版⾯的布局和外观显⽰样式。
⼆、CSS能做什么HTML能搭建⼀个基本的⽹页，但是我们能发现其构造的⽹页是极其简陋的，这时候就需要CSS来美化⽹页。
CSS的功能⾮常强⼤，不仅能改变各个HTML元素的颜⾊，⽂字⼤⼩等，还能改变元素的内边距，外边距等。
除此之外，CSS还能改变⽹页元素的布局，通过浮动，定位等⽅式将各个元素重新排列，构造⼀个整洁，简约的⽹页。
三、CSS引⼊⽅式内部样式表内部样式表（内嵌样式表）是写到html页⾯内部. 是将所有的CSS 代码抽取出来，单独放到⼀个<style>标签中<style>div {color: red;font-size: 12px;}</style>⾏内样式表⾏内样式表（内联样式表）是在元素标签内部的style 属性中设定CSS 样式。
适合于修改简单样式<div style="color: red; font-size: 12px;">HELLO WORLD</div>外部样式表样式单独写到CSS ⽂件中，之后把CSS⽂件引⼊到HTML 页⾯中使⽤引⼊外部样式表分为两步：1. 新建⼀个后缀名为.css 的样式⽂件，把所有CSS 代码都放⼊此⽂件中。
2. 在HTML 页⾯中，使⽤<link>标签引⼊这个⽂件。
<link rel="stylesheet" href="css⽂件路径">这种⽅式也是使⽤最多的⽅式，实现了⽂档样式相分离四、CSS语法规范CSS 规则由两个主要的部分构成：选择器以及⼀条或多条声明p {color: blue;font-size: 14px;}如上，p是选择器，表⽰选择了p元素（段落），将其中的颜⾊设置为蓝⾊，将字体⼤⼩设置为14px（px为像素，是最常⽤的⼀个单位）。
css常用,用法大全
取值：
normal：默认值。正常的字体。
bold：粗体。相当于700。也相当于<b>标签的作用效果。
bolder：比 normal > 粗
url( url ) : 使用绝对或相对 url 地址指定背景图像.
示例：
div{ background-imge: url("img/chunv.jpg")}
注意：引进的背景图片无法撑开盒子的宽高，如要引进背景，必须确保盒子存在宽度和高度。
<标签 class="id名"></标签> 获取方式：.id名{ color:red; }
<p id="p1">这是一段p标签</p> #p1{ color:red; }
4、后代选择器：必须含有两个标签以上，并且存在层级关系，才能使用后代选择器，标签与标签之间用（空格）连接
2、class类选择器：先给标签一个class属性（即给标签设置一个class名），然后通过使用（.class名）的方式获取标签，class名不唯一，可以重复使用，但要注意样式的互相影响
<标签 class="class名"></标签> 获取方式：.class名{ color:red; }
4、在同一组属性设置中标有“!important”规则的优先级最大
1.1.5常见选择器
1、html标签选择器：直接通过获取标签名，来给相对应的标签添加css样式
<p>这是一段p标签</p> 获取方式：p{ color:red; }
语法：
background：#000 ; 引进背景颜色
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
font-size: 20px; 属性 值
}
类别选择器
<HEAD> <STYLE type="text/css">
class类选择器
.myinput
{ border: 1px solid; CLASS类选择器 border-color:#D4BFFF; color:#2A00FF } </STYLE> </HEAD> 类选择器的定义格式为： <BODY> .类名 <FORM > { <P>用户名 样式规则; <INPUT name="textfield" … type="text" class="myinput"></P> 应用类选择器： class＝”类名“ } <P>密 码 <INPUT name="textfield" type="password" class="myinput"> </P> <P> <INPUT type="submit" name="Submit" value=" 重 填 "> <INPUT type="submit" name="Submit" value=" 提 交 "> </P> </FORM > </BODY>
伪类选择器
在IE浏览器中，CSS中通过设置伪类来控 制链接的样式
伪类选择器：
<HEAD> <STYLE type="text/css"> HTML选择器 A { /*设置超链接不带下划线*/ color: blue; text-decoration: none; /*文本修饰：无*/ } 特殊的伪类：A代表超链接，hover代表鼠标悬停 A:hover {/*鼠标在超链接上方停留时，带下划线 */ color: red; text-decoration:underline; /*文本修饰：下划线*/ } </STYLE> HEAD> <BODY> <A href=“a.htm" >俺是超链接，移过来我就显示下划线</A> </BODY> </HTML>
构造CSS规则
CSS的思想就是首先指定对什么“对象”进行设 置，然后指定对该对象的哪个方面的“属性”进 行设置，最后给出该设置的“值”。 因此，概括来说，CSS就是由3个基本部分—— “对象”、“属性”和“值”组成的。
基本CSS选择器
CSS选择器的构成: 1 标签选择器 2 类选择器 3 ID选择器 4 超链接伪类选择器
CSS选择器的构成
标签选择器： 标签选择器 h1{
color: red; font-size: 25px;
}
声明 声明
h1
{
color: red; 属性 值
font-size: 25px; 属性 值
}
选择器
HTM标签选择器
/*--关键代码--*/ <HEAD> <STYLE type="text/css"> P { /*设置样式：字体和背景色*/ font-family: System; font-size: 18px; color: #3333CC; } H2 { background-color: #CCFF33; text-align: center; } </STYLE> </HEAD> <BODY> <H2>品种特征方面：</H2> <P> 1、蛋鱼：蛋鱼…….。</P> <P> 2、龙睛：龙睛……..。</P> <P> 3、高头：高头….。</P>
HTML选择器
应用H2样式
应用P样式
类选择器：
.red{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ } 网页中调用：<p class=“red”>class选择器</p>
类别名称 .class 声明 声明
{
color: green; 属性 值
/* 标记选择器 */
/* 标记.类选择器 */ /* 红色 */ /* 类选择器 */
CSS样式表-语法规则
WEB基础
目标
构造CSS规则 基本CSS选择器 在网页中添加CSS的方法 复合选择器 CSS的继承特性
构造CSS规则
在具体介绍CSS之前，先思考一个生活中的问题。 张飞 { 身高:185cm; 这个表实际上是由 体重:105kg; 3个要素组成的， 性别:男; 即姓名、属性和属 性格:暴躁; 性值。 民族:代选择器
交集选择器
类别名称 声明 声明
h3.class
{
color: red; 属性 值
font-size: 23px; 属性 值
}
标记
选择器
h3
h3.special
.special
交集选择器
p{ color:blue; } p.special{ color:red; } .special{ color:green; }
ID选择器：
#green{ font-size:30px; /* 字体大小 */ color:yellow; /* 颜色 */ } 网页中调用：<p id=“green">ID选择器</p>
声明 #id 声明
{
color: yellow; 属性 值
font-size: 30px; 属性 值
}
ID 选择器
ID选择器
<HEAD> <STYLE TYPE="text/css"> #fire ID选择器 { color:red; font-size: 24px; } </STYLE> ID选择器的定义格式为： ＃ID名 { …样式规则; } </HEAD> 应用ID选择器：ID＝”ID名“ <BODY> <H2 ID="fire">我是二级标题，火是这样的</H2> <P ID =“water”>我是段落，水是这样的</P> </BODY>
构造CSS规则
CSS的作用就是设置网页的各个组成部分的表现 形式。 因此，如果把上面的表格换成描述网页上一个标 题的属性表，可以设想应该大致如下： 2级标题{ 字体:宋体; 大小:15像素; 颜色:红色; 装饰:下划线 }
构造CSS规则
再进一步，如果把上面的表格用英语写出来： h2{ font-family: 宋体; font-size:15px; color: red; text-decoration: underline; }