CSS样式基础知识
css知识全面总结
css知识全面总结嘿，朋友！今天咱们来聊聊 CSS 这玩意儿。
CSS 就像是给网页化妆的魔法颜料，能让网页变得美美的。
你想想，要是一个网页没有 CSS，那得多单调、多无聊呀！就好像一个人素颜出门，虽说也能看，但总觉得缺了点啥。
先来说说 CSS 的选择器。
这选择器啊，就像是你手里的魔法棒，指哪儿打哪儿。
比如说，“类选择器”，你给某个元素加上一个独特的类名，然后通过这个类名来控制它的样式，是不是很神奇？这就好比你在一群人中，喊出一个特定的名字，就能找到那个人，然后给他打扮打扮。
还有“ID 选择器”，这可厉害了，每个页面里 ID 得是唯一的。
它就像给网页元素颁发的独一无二的身份证，通过这个身份证，你能精准地给它设定样式。
比如说一个网页里的导航栏，你给它一个特定的ID，然后让它的颜色、字体、大小都变得与众不同。
再说说 CSS 的属性。
字体属性那可是基础中的基础，什么字体大小、字体样式、字重等等。
这就像是给文字穿上不同的衣服，有时候是休闲装（正常字体），有时候是正装（加粗字体），是不是很有趣？还有背景属性，能给网页元素换上各种背景颜色或者图片。
这就像给房间换壁纸，今天喜欢蓝色，明天喜欢粉色，随你心情！再瞧瞧边框属性，能给元素加上边框，粗细、样式、颜色随你定。
这是不是有点像给一个物品加上漂亮的框框，瞬间就高大上起来了？至于定位属性，那可真是个神奇的存在。
绝对定位、相对定位，让元素想在哪就在哪。
这就好比你在摆积木，想把哪块积木放哪儿就放哪儿，多自由！还有浮动属性，能让元素飘起来，并排排列。
这感觉就像一群小伙伴手拉手并排走，多整齐！CSS 还有盒模型呢，这可是个重要的概念。
内容、内边距、边框、外边距，就像一个盒子的里里外外，每个部分都能影响元素的最终大小和显示效果。
另外，CSS 中的媒体查询也不能忽略。
它能让网页根据不同的设备和屏幕尺寸呈现出不同的样式。
这就好比你有一件衣服，能根据不同的场合自动变换款式，是不是超厉害？总之，CSS 就像是网页的化妆师，能让网页变得丰富多彩、独具魅力。
css教程菜鸟
css教程菜鸟CSS（层叠样式表）是一种用于描述网页上的元素布局和样式的语言，它能够使网页更加美观和易于阅读。
本文将介绍一些CSS的基础知识和常用属性，以帮助菜鸟入门。
首先，让我们了解一下CSS的基本语法。
CSS由选择器和声明块组成。
选择器指定了要应用样式的HTML元素，而声明块则包含了一系列属性-值对，用于描述要应用到元素上的样式。
下面是一个简单的示例：```p {color: red;font-size: 20px;}```上述代码中，选择器“p”表示要应用样式的HTML段落元素。
声明块中的属性-值对指定了段落的文本颜色为红色，字体大小为20像素。
接下来，我们将介绍一些常用的CSS属性。
1. 字体属性：用于设置文本的字体样式，如字体大小、字体族等。
例如：```p {font-size: 16px;font-family: Arial, sans-serif;}```上述代码将段落的字体大小设置为16像素，字体族为Arial或者sans-serif。
2. 背景属性：用于设置元素的背景样式，如背景颜色、背景图片等。
例如：```body {background-color: lightblue;background-image: url("bg.jpg");}```上述代码将页面的背景颜色设置为浅蓝色，背景图片为名为“bg.jpg”的图片。
3. 边框属性：用于设置元素的边框样式，如边框宽度、边框颜色等。
例如：```div {border: 1px solid black;}```上述代码将`<div>`元素的边框宽度设置为1像素，边框颜色为黑色。
4. 盒模型属性：用于调整元素的尺寸和定位，如元素的宽度、高度、外边距等。
例如：```img {width: 200px;height: 150px;margin-top: 10px;}```上述代码将图片的宽度设置为200像素，高度设置为150像素，并且向上外边距10像素。
CSS知识点总结
CSS知识点总结⼀．Css分类1.替代replaced elements:img input(radio button, checkbox, text)不可替代nonreplaces elements:html,xhtml,span,a,div,body,form,p,em,strong,2.block-level and inline-level:(block可以包含inline 元素，反过来是不可以的！) block-level:p div li ulinline-level: a span strong em b i u⼆．选择器2.元素选择器：P{}3. Grouping Selectors(分组)eg:h2, p {color: gray;}4.The universal selector（通配选择器）eg:* {color: red;}5. Grouping Declarationseg:h1 {font: 18px Helvetica; color: purple; background: aqua;}6.类选择器：.ddd7.ID选择器：#ddd8.属性选择器简单属性选择h1[class] {color: silver;}根据具体属性值p[class="warning"] {font-weight: bold;}根据部分属性值选择p[class~="warning"] {font-weight: bold;}⼦串匹配属性选择器[foo^="bar"][foo$="bar"][foo*="bar"]特定属性选择类型*[lang|="en"] {color: white;}9.使⽤⽂档结构后代选择器blockquote b, p b {color: gray;}选择⼦元素h1 > strong {color: red;}选择相邻兄弟元素h1 + p {margin-top: 0;}10.伪类选择器静态伪类：a:visited{}a:link{}(好像⽤不了)动态伪类：a:focus{}(常⽤于input元素)a:hover{}a:active{}选择第⼀个⼦元素：Li:first-child{}根据语⾔选择（）*:lang(fr){}结合伪类：link:hover:active {color: orange;}伪元素选择器：设置⾸字母样式li:first-letter{ color:Red;设置第⼀⾏的样式：.aa:first-line{ color:Purple;}设置之前和之后元素的样式：a:before{ content:"{}"; color:Silver;}a:after{ content:"end"; color:Aqua;}三．结构和层叠1.特殊性：重要性：!Important (最强悍！) eg: p.dark {color: #333 !important; background: white;}内联样式特殊性：1000 ID选择器：0100 li#answer {color: navy;} /* 0,1,0,1 (winner) */类属性值，属性选择或伪类：0010 h2.grape{color: purple;}/* 0,0,1,1 (winner)*元素和伪元素：0001 h1 {color: red;} /* 0,0,0,1 */通配选择器：0000结合符:⽆继承：⽆（0特殊性⽐⽆特殊性的更强）Eg: * {color: gray;} (（当h1中有其他元素时win）h1#page-title {color: black;}2.继承a)Border：没有继承b)Body:可以向上继承到html,其他的都是向下继承3.层叠：具有相同特殊性的靠后的权重⼤按权重和来源排序：（p79）读者的重要声明>创作⼈员的重要声明>创作⼈员的正常声明>读者正常>⽤户代理声明按特殊性排序按顺序排序Lvha顺序⽐较重要：即live visited hover active四．值和单位1.数字2.百分数3.颜⾊命名颜⾊：blue green white red black maroon ...⽤GRB指定颜⾊函数式RGB颜⾊(百分数法：0%-100%，数字法：0-255)Eg:rgb(100%,100%,100%)rgb(0%,0%,0%)rgb(255,255,255)rgb(0,0,0)灰度表：p.one {color: rgb(0%,0%,0%);}p.two {color: rgb(20%,20%,20%);}p.three {color: rgb(40%,40%,40%);}p.four {color: rgb(60%,60%,60%);}p.five {color: rgb(80%,80%,80%);}p.six {color: rgb(0,0,0);}p.seven {color: rgb(51,51,51);}p.eight {color: rgb(102,102,102);}p.nine {color: rgb(153,153,153);}p.ten {color: rgb(204,204,204);}25%*255=63.75=64⼗六进制RGB颜⾊Web颜⾊：rgb值20%和52和33（⼗六进制）整除4.长度单位a)绝对长度单位：in,cm,mm,pt(点),pc（派卡）1in=2.54cm 1cm=0.3394in1 in=72pt 1 in=6pcB) 相对长度单位Em和ex:Px:1em=14px 1em=2exEm最好的度量单位5.URL绝对URL相对URL注意：url和开始括号之间不能有空格6.关键字None:不同于0，Inherit:它的属性值和⽗元素相同7.css2单位：p(110)a)⾓度值：deg, grad 和 radb)时间值：s,ms 1000ms=1sc)频率值：hz,mhz五．字体1.字体系列制定字体系列：p {font-family: TimesNR,serif;}p {font-family: Times,TimesNR,'New Century Schoolbook',Georgia,'New York',serif;} 有空格、包括“#”和”$”的时候加“单引号”Cursive必须加“双引号”2.字体加粗a)Font-weight:bold bolder mormal 100 --900 lighterb)相对⼤⼩关键字:Bolder 是相对于⽗级字体粗细⽽⾔3.字体⼤⼩a)Font-size:xx-small x-small small medium large x-large xx-large smaller larger inheritb)相对⼤⼩关键字：larger smallerc)绝对⼤⼩：xx-small x-small small medium large x-large xx-larged)百分数：根据⽗元素继承的⼤⼩来计算strong {font-weight: lighter; font-size:larger;}strong b {font-weight:lighter; font-size:200%;}4.风格和变形a)字体风格：Font-style:italic oblique normal inheritb)字体变形：font-variant:small-caps normal inherit（只对英⽂有⽤，对汉语没有影响）c)转换⼤⼩写：p{ text-transform:uppercase;}5.拉伸和调整字体a)字体拉伸：font-stretch:normal| wider | narrower | ultra-condensed | exTRa-condensed| condensed| semi-condensed| semi-expanded| expanded| exTRa-expanded| ultra-expanded | inheritb)我的浏览器不⽀持（可以忽略）6.Font属性a)等价：h1{ font-style:inherit; font-weight:bold; font-variant:small-caps; font-size：20px; font-family:Candara,Corbel;}h1{ font:inherit bold small-caps20px Candara,Corbel; }b)注意;前两个可以互换，后两个不可以，normal 可以省略c)增加⾏⾼：line-height,Eg：body {font-size: 12px;}h1 {font: bold italic200%/1.2Verdana,Helvetica,Arial,sans-serif;}7.字体匹配六．⽂本属性1.缩进和⽔平对齐a)缩进⽂本：(只能⽤于块级元素！)text-indent:3em 10%b)⽔平对齐：(只能⽤于块级元素！)text-align:left center right justify(两端对齐⽂本) inherit2.垂直对齐：元素中⽂本基线之间的最⼩距离a)Line-height:”line-height”减去“font-size”等于⾏间距i.Line-height:18px,0.33in,150%,1.5emii.适⽤于所有元素iii.⾏⾼和继承：Line-height值从⽗元素继承时，要从⽗元素计算，⽽不是⼦元素上计算。
css style用法
css style用法CSS（CascadingStyleSheets）是一种用于网页设计的样式表语言。
它可以控制HTML文档中的元素的外观和布局，使得网页设计更加美观、简洁、易于维护。
在本篇文章中，我们将探讨CSS style用法的基础知识和常见技巧。
基础知识CSS样式表由一系列的规则（rule）组成，每个规则包含一个选择器（selector）和一组声明（declaration）。
选择器用于指定要应用样式的HTML元素，声明则用于定义这些元素的样式。
例如，下面的CSS规则将为所有h1元素设置红色字体、黑色背景和20像素的上下内边距：```cssh1 {color: red;background-color: black;padding: 20px 0;}```在这个例子中，h1是选择器，color、background-color和padding是声明，它们用冒号（:）分隔开来，每个声明以分号（;）结尾。
需要注意的是，CSS规则是区分大小写的，因此h1和H1是不同的选择器。
选择器选择器是指定要应用样式的HTML元素的标识符。
下面是一些常见的选择器类型：1. 元素选择器（Element Selector）：通过HTML元素的名称来指定要应用样式的元素。
```cssp {color: blue;}```这个规则将为所有p元素设置蓝色字体。
2. ID选择器（ID Selector）：通过HTML元素的id属性来指定要应用样式的元素。
```css#header {background-color: gray;}```这个规则将为id为“header”的元素设置灰色背景。
3. 类选择器（Class Selector）：通过HTML元素的class属性来指定要应用样式的元素。
```css.highlight {font-weight: bold;}```这个规则将为所有class为“highlight”的元素设置粗体字。
第12讲、CSS基础知识及设置
七、小结
•
本章主要介绍层叠样式表的概念、样 式表的种类及样式的应用。
练习
• 利用CSS样式对4.3.2.html内容进行格式化 使得到如4.3.2(result).html效果。
• 使用外部(Extenal)样式表，相对于内嵌(Inline)和 内部式 (Internal)的，有以下优点： • CSS的最大特点就是将内容和格式分离。一个外 部CSS文件，可以被很多网页共用。 • 便于修改。如果要修改样式，只需要修改CSS文 件，而不需要修改每个网页。 • 显示示例，有以下优点：提高网页显示的速度。 如果样式写在网页里。 • 提高网页显示的速度。如果样式写在网页里，会 降低网页显示的速度，如果网页引用一个CSS文 件，这个CSS文件多半已经在缓存区(其它网页 早已经引用过它)，网页显示的速度就比较快。
• • • • • • • • • •
然后你建立一个网页，代码如下： <HTML> <HEAD> <link href="../asdocs/css_tutorials/home.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <H1 class="mylayout"> 这个标题使用了Style。</H1> <H1>这个标题没有使用Style。</H1> </BODY> </HTML>
• 2）打开并设置“链接页面属性”选项窗口。
• • • •
字体 指定链接文本使用的默认字体。 大小 指定链接文本使用的默认的字体大小。 链接颜色 指定应用于链接文本的颜色。 已访问链接的颜色 指定应用于访问过的链接的颜 色。 • 鼠标经过时链接的颜色 指定当鼠标（或指针）位 于链接上时应用的颜色。 • 活动链接的颜色 指定当鼠标（或指针）在链接上 单击时应用的颜色。 • 下划线样式 指定scading Style Sheet),中文译为层叠样 式表，它是用于控制网页样式并允许将样式信息 和网页内容分离的一种标记性语言。 • CSS是1996年由W3C审核通过，并且推荐使用的。 简单的说，CSS的引入就是为了使HTML语言更好 地适应页面的美工设计。它以HTML为基础，提供 了更丰富的格式化功能，如字体、颜色、背景和 整体排版等。
css总结笔记
css总结笔记
CSS 是层叠样式表的缩写，是一种用于设计和布局网页的编程语言。
以下是CSS 总结笔记的全文:
一、CSS 的概述
CSS 用于设计和布局网页，可以让网页变得更加生动、美观和易读。
CSS 可以用于网页的头部、主体和底部，以及用于网页的各个部分。
二、CSS 的语法
CSS 的语法包括选择器、属性和值等。
选择器用于选择网页中的元素，属性和值用于设置元素的样式。
三、CSS 的样式
CSS 的样式包括颜色、字体、大小、边框、背景等。
通过设置这些样式，可以让网页变得更加美观。
四、CSS 的应用场景
CSS 的应用场景包括网页的布局、元素的样式设置和网页的颜色搭配等。
通过使用 CSS，可以让网页变得更加生动、美观和易读。
五、CSS 的兼容性
CSS 在不同的浏览器中有不同的兼容性问题。
为了解决这个问题，可以使用CSS 的媒体查询和伪元素等方法。
六、CSS 的优化
CSS 的优化可以提高网页的加载速度和用户体验。
可以通过减少重排、减少重写和压缩 CSS 等方式进行优化。
七、CSS 的拓展
CSS 还有很多拓展功能，如响应式设计、动画效果、Web 组件等。
通过使用CSS，可以让网页变得更加生动、美观和易读。
八、CSS 的总结
CSS 是网页设计中不可或缺的一部分。
通过使用 CSS，可以让网页变得更加生动、美观和易读。
在学习 CSS 时，需要熟练掌握语法、样式和应用场景，并了解 CSS 的兼容性和拓展功能。
CSS常用样式属性大全
CSS常用样式属性大全1. 文本属性- `color`：设置文本颜色- `font-size`：设置字体大小- `font-family`：设置字体系列- `font-weight`：设置字体粗细- `text-align`：设置文本对齐方式- `text-decoration`：设置文本装饰（如下划线、删除线等）- `text-transform`：设置文本大小写转换2. 背景属性- `background-color`：设置背景颜色- `background-image`：设置背景图片- `background-repeat`：设置背景图片的重复方式- `background-position`：设置背景图片的位置- `background-size`：设置背景图片的尺寸3. 边框属性- `border`：设置元素边框样式、宽度和颜色- `border-radius`：设置元素边框的圆角- `border-color`：设置元素边框的颜色- `border-width`：设置元素边框的宽度4. 布局属性- `display`：设置元素的显示方式（如块级、内联等）- `width`：设置元素的宽度- `height`：设置元素的高度- `margin`：设置元素外边距- `padding`：设置元素内边距- `float`：设置元素的浮动方式5. 盒模型属性- `box-sizing`：设置元素的盒模型计算方式- `overflow`：设置元素溢出内容的处理方式- `position`：设置元素的定位方式- `top`：设置定位元素的上边距- `bottom`：设置定位元素的下边距- `left`：设置定位元素的左边距- `right`：设置定位元素的右边距以上是CSS中常用的样式属性，通过合理使用这些属性可以实现各种各样的页面效果。
在编写CSS代码时，建议将样式属性单独分行展示，以增加代码的可读性和维护性。
css 总结
css 总结CSS是网页设计中不可或缺的基础技术之一，它实现了网页的布局、样式和交互效果等方面的功能。
对于前端开发人员来说，掌握CSS 的基本知识和技巧非常重要，下面就对CSS进行一些简单的总结。
一、基本语法CSS代码由选择器和声明块组成，选择器用于确定需要应用样式的元素，而声明块则包含一个或多个属性和对应的值。
例如：```h1 {color: red;font-size: 24px;}```上面的代码使用了h1选择器，表示应用样式到网页中所有的h1元素。
花括号内是声明块，其中color和font-size是两个属性，而red和24px则是对应属性的值。
二、选择器CSS中有各种各样的选择器，用于指定需要应用样式的元素。
下面列出一些常见的选择器：- 标签选择器：根据元素的标签名来选择元素，如div、p、h1等；- 类选择器：根据元素的class属性来选择元素，用“.”加类名表示，如.class；- ID选择器：根据元素的id属性来选择元素，用“#”加id名称表示，如#id；- 伪类选择器：可以根据元素的状态来选择元素，如:hover表示当鼠标放在元素上方时的状态；- 后代选择器：可以通过两个或多个选择器的组合来选择元素，如divp表示选择div元素下的所有p元素。
三、基本样式属性CSS中有众多的样式属性，下面列出一些常用的基本样式属性：- color：设置文字的颜色，可以使用颜色名称、16进制RGB值或RGB值；- font-size：设置文字大小，可以使用像素、em、rem单位等；- background：设置元素的背景，可以设置颜色或背景图片等；- border：设置元素的边框，可以设置边框颜色、粗细和样式等；- margin：设置元素的外边距，可以设置上下左右四个方向的外边距；- padding：设置元素的内边距，可以设置上下左右四个方向的内边距。
四、盒模型CSS中的盒模型指的是网页中的元素在样式效果下所占的空间范围。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
定义了ID样式后，需要在引用该样式的标记符内使用id属性。例如，可以定义一个ID样式如
下：#red{color:red}
然后可以存若干丌同的HTML标记符中使用该样式规则,如下所示：
<p id="red">本行文字为红色。</p> <h1 id="red">本标题红色。</h1>
© Copyright Camelot Corporation 2012
CSS中的选择器
虚类选择器
对于a标记符,可以用虚类的方式设置丌同类型链接的显示方式，所谓丌同类型超链接，是指 访问过的、未访问过的、激活的以及鼠标指钍悬停于其上的这4种状态的超链接。 可以通过指定下列选择器乊一设置超链接样式： a:link戒:link当超链接没被访问过时，所设置的样式应用于超链接。 a:visited戒:visited当超链接已被访问过时，所设置的样式应用于超链接。 a:active戒:active当超链接当前为被选中状态时，所设置的样式应用于超链接。 a:hover戒:hover当鼠标指针移动到超链接乊上时，所设置的样式应用于超链接。
优势
在于把内容和格式分离开，使得能够用一种统一的方式来管理各种丌同的显示格式。 语法 Selector { property: value }
Selector -- 选择符
property : value -- 样式表定义。属性和属性值乊间用冒号(:)隔开。多个定义乊间用分号(;)隔开
© Copyright Camelot Corporation 2012
© Copyright Camelot Corporation 2012
CSS中的选择器
虚类选择器
以下一组样式定义可以使网页中的超链接文字在未访问过时以红色显示，访问过和被选中 时以蓝色显示，鼠标悬停其上时以紫色显示，除了鼠标悬停时有下划线，其他状态均没有下划 线。
<p style="color:#ff0000">这段文字将显示为红色</p> <p style="color:#ff0000; background-color:yellow;">这段文字的背景色为<I>黄色</I></p>
<p style=" font-family: '华文彩云'; font-size:24px">这段文字将以黑体显示</p>
嵌入样式表
嵌入式样式表通常包含在HTML，文档的头部，即HEAD元素中，并丏有一个与门的元素 style来标记这种样式表。它的书写格式通常为：
<style type="text/css"> <!-p{color:red;font-weight:bold}
-
->
</style>
在这个格式中，style元素的type属性必须设为"text/css"，表示这定义的是一个层叠样式表。 这样一来，当丌支持层叠样式表的浏览器读到这个属性时，会自动忽略这个样式表。 另外，在STYLE元素中还添加了HTML的注释符"<!--"和"-->"，这么做的好处是为了避免 老版本的浏览器在网页上将这些样式以文字方式显示出来。 嵌入式样式表首先可以为某个HTML标记定义样式，定义好乊后，整个网页中所有的这个标
这段代码中的第一个P元素中的样式表将文字用红色字体显示。还有一个特殊的地方是第二 个P元素中还嵌套了<I>元素，<I>元素中的文字同样使用了P元素中的样式。这种性质通常称为 继承性，也就是说子元素会继承父元素的样式。
© Copyright Camelot Corporation 2012
CSS的分类
H1.color_red{coler:red}
H1.color_yellow{coler:yellow} H1.color_blue{coler:blue}
为H1设置样式时，可以自选择 三个样式中的一个；
© Copyright Camelot Corporation 2012
CSS中的选择器
用户定义的类选择器
可以使用类(class)来为单一HTML标记符创建多个样式。要想将一个类包括到样式定义中, 可将一个句点和一个类名称添加到选择器后，如下所示： selector.classname{property:value:……} 可以使用任何名称命名类，但通常应使用有具体含义的名称。例如，如果需要在网页的三 处使用H1标记符，每处的文本具有丌同的颜色，此时可以定义以下类样式：
<p style="color：#ff0000">内联式样式表</p>
这种样式表叧会对使用它的元素起作用，而丌会影响HTML文档中的其他元素。也正因为如 此，内联式样式表通常用在需要特殊格式的某个网页对象上。本案例就一个应用内联式样式表 的一个网页实例，在这个实例中，各段文字都定义了自己的内联式样式表：
目录
一 CSS基础知识 二 CSS的分类 三 CSS样式规则
四 CSS中的选择器
五 CSS样式表基本属性 六 CSS代码分享
© Copyright Camelot Corporation 2012
CSS样式规则
样式规则
在html标记符中直接指定样式信息显然没有发挥出样式表的主要优势——简化格式设置和维 护工作，因为每一个style属性都必须单独设置。如果能将相类似的样式都统一定义了。然后再 具体应用于网页中的元素，那么就能体现出CSS的优越性了。实际上，这正是CSS应用于网页的 最常用方式，即在HEAD标记符内使用STYLE标记符，然后在STYLE标记符中定义样式定义样式 的方式为：
CSS基础知识
概念
层叠样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来迚行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠
标移上去后字变成红色的丏有下划线，这就是一种风格。通过设立样式表，可以统一地控制
HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用层叠样式表， 可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。
以采用所定义的样式。在定义了以上的red类后，就可以用以下方式引用它：
<p class="red">本行文字为红色</p> <h1 class="red">本标题为红色</h1>
© Copyright Camelot Corporation 2012
CSS中的选择器
用户定义的ID选择器
当网页设计者想在整个网页戒几个页面上多处以相同样式显示标记符时，除了用.classname 的方式定义一个通用类样式以外，还可以使用ID定义样式。要将一个ID样式包括在样式定义中， 应用一个井号(#)作为ID名称的前缀，如下所示：
selector{property1:vaIue1;property2:value2;……}
其中，selector表示样式作用的对象（选择器）property和value则表示相应CSS属性和 值。每一对属性和值用“分号”隔开。 例如：
h1{font-family:楷体_gb2312;text-align:center}，其中h1是选择器，font- family:楷体 _gb2312;text-align:center”是声明。在声明中，font-family和text-align是属性，楷体_gb2312和 center是相应的属性值。
CSS样式基础知识
2012-10-19
© Copyright Camelot Corporation 2012
目录
一 CSS基础知识 二 CSS的分类 三 CSS样式规则
四 CSS中的选择器
五 CSS样式表基本属性 六 CSS代码分享
© Copyright Camelot Corporation 2012
四 CSS中的选择器
五 CSS样式表基本属性 六 CSS代码分享
© Copyright Camelot Corporation 2012
CSS中的选择器
HTML标记符选择器
HTML标记符是最典型的选择器类型，网页设计者可以为某个戒某些具体HTML元素应用 样式定义。对于丌同的标记符选择器，我们可以采用编组的方式简化样式定义(对于其他选择器， 也可以用类似的编组方法)。前面的实例已有介绍。此例中的标记选择器是<h1>标记，即：
h1{ font-size: 36px; font-family: "隶书"; font-weight: bold; color: #993366; }/*html标记选择器*/
规定所有的标题1都使用此样式。
© Copyright Camelot Corporation 2012
CSS中的选择器
具有上下文关系的HTML标记符选择器
CSS基础知识
例子
© Copyright Camelot Corporation 2012
目录
一 CSS基础知识 二 CSS的分类 三 CSS样式规则
四 CSS中的选择器
五 CSS样式表基本属性 六 CSS代码分享
© Copyright Camelot Corporation 2012
CSS的分类
如果需要为位于某个标记符内的标记符设置特定的样式规则，则应将选择器指定为具有上 下文关系的HTML标记符。例如，如果叧想使位于h2标记符内的b标记符具有特定的属性，则应 使用以下格式：