HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(上)(DOC)
详解CSS定义字体、颜色、背景等属性
详解CSS定义字体、颜⾊、背景等属性•字体属性•字体font-family:"字体1","字体2",... 例：font-family：“宋体”;•字号font-size:⼤⼩的取值例：font-size:16px; 注意：xx-small:绝对字体尺⼨，最⼩。
x-small:绝对字体尺⼨，较⼩。
medium:绝对字体尺⼨，正常默认值。
对应还有large、x-large、xx-large等。
larger:相对字体尺⼨，相对于⽗对象中字体尺⼨进⾏相对增⼤。
smaller:相对字体尺⼨，相对于⽗对象中字体尺⼨进⾏相对减⼩。
length:可采⽤百分⽐或长度值，不可为负值，其百分⽐取值是基于⽗对象中字体的尺⼨。
•字体风格font-style:样式的取值例：font-style:normal .normal是默认的正常字体；italic以斜体显⽰⽂字；oblique属于中间状态，以偏斜体显⽰。
•加粗字体font-weight:字体粗细值例：font-weight:normal. 其中normal表⽰正常粗细；bold表⽰粗体；bolder表⽰特粗体；lighter表⽰特细体；number不是真正的取值，其范围是100~900，⼀般情况下都是整百的数字，如200、300等。
•⼩写字母转化为⼤写font-variant:取值例：font-variant:small-caps;能将⼩写的英⽂字母转化为⼤写字母且字体较⼩。
另⼀个normal,表⽰正常显⽰。
•CSS中可采⽤复合样式，来简化代码，如：.h{font-family:"宋体"; font-weight:bold; font-style:italic;}•颜⾊和背景属性•颜⾊属性color:颜⾊取值例：color:red。
color可以⽤关键字或者⼀个⼗六进制的RGB值。
color:#ff0000 表⽰红⾊ color:#ffff00 表⽰黄⾊ color:#000099 表⽰蓝⾊关键字就是颜⾊的英⽂名称，如red,green,blue,分别表⽰红、绿、蓝。
《WEB前端设计》CSS样式之段落属性
《WEB前端设计》CSS样式之段落属性CSS（Cascading Style Sheets）是一种用于控制网页样式的标记语言，它可以和HTML结合使用，为网页提供美观的样式效果。
在CSS中，段落属性是指可以用来控制文本在段落中的排版和样式的属性。
段落是网页中常见的文本块，它通常用于组织和呈现大段的文字内容。
通过使用CSS样式，我们可以调整段落的字体、大小、对齐方式、行高等属性，使得段落在网页中更加美观和易读。
一、字体属性1. font-family：设置段落的字体类型。
可以使用系统字体，也可以引入自定义的字体。
例如，font-family: Arial, sans-serif;表示使用Arial字体，如果系统中不存在Arial字体，则使用系统默认的sans-serif字体。
2. font-size：设置段落的字体大小。
可以使用像素（px）、百分比（%）或者em作为单位。
例如，font-size: 16px;表示字体大小为16像素。
3. font-weight：设置段落的字体粗细。
可以取值为normal（默认）、bold（加粗）、lighter（细）等。
例如，font-weight: bold;表示将字体加粗显示。
二、对齐属性1. text-align：设置段落的对齐方式。
可以取值为left（左对齐）、right（右对齐）、center（居中对齐）等。
例如，text-align: center;表示将段落的文本内容居中对齐。
2. text-indent：设置段落的首行缩进。
可以使用像素（px）、百分比（%）或者em作为单位。
例如，text-indent: 2em;表示段落的首行缩进为两个字体大小的倍数。
三、行高属性1. line-height：设置段落的行高。
可以使用像素（px）、百分比（%）或者无单位的数值作为单位。
例如，line-height: 1.5;表示行高为字体大小的1.5倍。
四、其他属性1. color：设置段落的文本颜色。
Web前端开发任务驱动式教程HTML5CSS3JavaScript任务9复合选择器通配符选择器课件
图4
任务小结
交集选 择器
并集选 择器
后代选 择器
通配符 选择器
同时应 用多个 样式
课后实训
设计并制作“杭州西湖”景点网页，效果如图所示。
谢谢观看
两个选择器之间不能有空格，必须连续书写。
<p id="red">这个段落是红色。</p> <p class="green">这个段落是绿色。</p>
p#red p.green
知识准备
示例：交集选择器的使用
<style type="text/css"> p{ color: #F00; } .p1 { color: #0F0; } h2.p1 { color: #00F; }
</body>
知识准备
1. 复合选择器
后代：某标记内嵌套的所有子元素，都称为该标记的后代。 后代选择器：把外层的标记写在前面，内层的标记写在后面，之间
用空格分隔。 <h1>热烈庆祝<span>第三十届</span>牡丹文化节召开</h1> h1 span
知识准备
示例：后代选择器的使用
<style type="text/css"> span { text-decoration: underline; } h2 span { color: #F00; } h3 span { color: #00F; } .uu li ul li { font-weight: bold; color: #00F; }
</style>
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像素。
《HTML+CSS基础教程(课件PPT版)》
边框和边缘样式
1
边框样式
学习如何设置元素的边框样式、宽度和颜色。
2
内边距和外边距
了解内边距和外边距的区别，学习如何为元素添加间距。
3
边框圆角
掌握如何为元素的边框添加圆角效果，制作更具吸引力的页面。
标题和列表样式
标题样式
学习如何设置标题的样式，使其与页面风格一致。
列表样式
了解如何使用CSS样式为无序列表和有序列表定制符号 和样式。
4 样式优先级
了解CSS样式优先级的计算规则，学习如何解决样式冲突。
基本标签及其用法
div标签
了解div标签的作用，并学习如何使用它创建容器。
header和footer标签
学习如何使用header和footer标签来定义网页的页 眉和页脚。
span标签
掌握span标签的使用方法，如内联元素的容器。
《HTML+CSS基础教程 （课件PPT版）》
介绍HTML和CSS的基础知识。学习HTML基础语法、标签、CSS基础语法和选择 器，以及它们的基本用法。
HTML基础语法和标签
1 HTML是什么？
2 HTML标签
了解HTML的定义和作用，学 习HTML文档的基本结构。
掌握常用的HTML标签，如标 题、段落、图片、链接等。
ቤተ መጻሕፍቲ ባይዱ
跳转。
3
链接到外部网页
学习如何创建超链接，并链接到其他网页。
下载文件链接
掌握如何创建下载链接，提供文件下载功能。
CSS样式和样式表
1 内联样式
2 内部样式表
3 外部样式表
了解如何在HTML标签内部 添加样式，实现单个元素的 样式设置。
学习如何在HTML文档内部 使用style标签，定义多个元 素的样式。
HTML5——列表元素、结构元素、分组元素、页面交互元素、文本层次语义元素、全局属性
HTML5——列表元素、结构元素、分组元素、页⾯交互元素、⽂本层次语义元素、全局属性列表元素 ⽆序列表：⽹页中最常⽤的列表，其各个列表项之间没有顺序级别之分，通常是并列的。
其基本语法格式： <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ul> 有序列表：有排列顺序的列表，其各个列表项按照⼀定的顺序排列。
其基本语法格式： <ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ol> 定义列表：⽤于对术语或名词进⾏解释和描述。
与⽆需列表不同，定义列表的列表项前没有任何项⽬符号。
其基本语法格式： <dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> ... <dt>名词2</dt> <dd>名词2解释1</dd> <dd>名词2解释2</dd> ... </dl>结构元素 HTML5中所有元素都是有结构性的，且这些元素与块元素⾮常相似。
下⾯将介绍常⽤的结构性元素。
1.header 元素 HTML5中的header 元素是⼀种具有引导和导航作⽤的结构元素，该元素可以包含所有通常放在页⾯头部的内容。
header 元素通常⽤来放置整个页⾯或页⾯内的⼀个内容区块的标题，也可以包含⽹站Logo 图⽚、搜索表单或者其他相关内容。
其基本语法格式如下： <header> <h1>⽹页主题</h1> ... </header> 注：header元素并⾮head元素，是HTML5新增的元素，并不限制header元素的个数，⼀个⽹页中可以使⽤多个header元素，也可以为每⼀个内容块添加header元素。
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（层叠样式表）是一种用来定义HTML文档样式的语言。
它可以用来布局HTML页面、设置字体、颜色、大小等。
本篇介绍我们将学习如何使用CSS来美化网页。
要使用CSS，我们需要先了解一下CSS的基本结构。
一个基本的CSS规则由选择器和声明块组成。
选择器用于指定要应用样式的HTML元素，而声明块则包含要应用的样式。
例如，要将段落的文本颜色设置为红色，我们可以使用以下CSS规则：```p {color: red;}```以上代码中，选择器为“p”，代表要应用样式的所有段落元素。
在声明块中，我们使用属性“color”来定义文本颜色，并将其值设置为“red”。
CSS属性可以设置元素的各种样式。
例如，“color”属性用于设置文本颜色，“font-size”属性用于设置字体大小，“background-color”属性用于设置背景颜色等等。
除了选择器外，CSS还提供了一些其他方法来选择要应用样式的元素。
例如，我们可以使用类选择器来选择具有相同类名的元素，使用ID选择器来选择具有相同ID的元素，使用伪类选择器来选择某个元素的特定状态等等。
CSS还支持级联（cascading）的概念。
这意味着在HTML文档中使用多个CSS规则时，如果有相同的样式属性，那么将根据规则的优先级来应用样式。
一般而言，ID选择器具有最高优先级，其次是类选择器、元素选择器等。
使用CSS，我们可以对网页进行灵活而精确的样式设置。
我们可以通过设置元素的定位属性来实现布局，通过设置文本样式属性来改变字体、颜色等，还可以通过设置背景属性来改变背景图片、颜色等。
总结一下，CSS是一种强大的网页样式定义语言，我们可以使用CSS来美化网页的外观和布局。
通过选择器和声明块的组合，我们可以对HTML元素应用各种各样的样式。
同时，CSS还支持级联的概念，使我们能够更好地控制样式的优先级。
希望这个入门教程能够帮助你了解CSS的基本知识，为进一步学习和应用CSS打下基础。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML5开发培训CSS选择器及文字段落属性和背景属性和列表属性(上)我们已经讲了一部分选择器了，今天还要继续讲一些选择器，以便我们能更快的找到页面中的元素并修饰他的样式。
另外我们看到页面的标签还需要修饰其它的样式，比如背景图像，文字间距等，所以我们还讲些样式。
通过以下几点介绍：✓关系选择器✓动态伪类选择器✓结构性伪类选择器✓文字属性✓段落属性✓背景属性✓列表属性好了，我们先来看一下关系选择器一、关系选择器1.E F：后代选择器，找到页面中相应的的子元素及孙子及重孙子元素，因为这些元素都是后代元素，我们把标签的第一层嵌套的元素叫子元素，再一层嵌套及以后嵌套的元素及子元素都叫后代元素。
（当然也是相对的）。
后代选择器可以是我们第三章讲过的所有的基本选择器中的一种，我们先理一下元素之间的层次关系。
<title></title><style type="text/css"></style></head><body><div><p>相关的内容<span>我是div的孙子元素（后代元素），但是我也是p的儿子，这就体现出“相对”了</span></p><span>我是div的儿子,并且我是p紧邻的兄弟元素，我还是p后面的所有的兄弟元素</span><span>我是p后面的所有的兄弟元素</span></div></body></html>好了，了解所有元素之间的关系后，我们就可以通过相关的选择器来改变他们的样式了。
代码：<div><p>相关的内容<span>我是div的孙子元素（后代元素）</span></p><span>我是div的儿子</span><span>我是div的儿子</span></div></body></html>2.E>F子元素选择器找到页面中相应元素的子元素代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">div span{background-color: yellow;}</style></head><div><p>相关的内容<span>我是div的孙子元素（后代元素）</span></p><span>我是div的儿子</span><span>我是div的儿子</span></div></body></html>3.E+F 选取当前元素后一个兄弟元素代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">p+span{background-color: yellow;}</style><body><div><p>相关的内容<span>我是div的孙子元素（后代元素）</span></p><span>我是p的紧邻的元素</span><span>我是p后面的所有的元素</span></div></body></html>4. E ~ F 选取当前元素后所有的兄弟元素代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">p~span{background-color: yellow;}</style></head><body><div><p>相关的内容<span>我是div的孙子元素（后代元素）</span></p><span>我是p后面的所有的元素</span><span>我是p后面的所有的元素</span></div></body></html>关系选择器我们经常使用，因为我们写代码的时候，经常这样写：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS选择器</title></head><body><div><h3>我是h3标签</h3>div的h3，p,input标签，第二个div里的h3，p,input标签不一样怎么办，我们不可能再定义很多个类别选择器对吧，所以我们就想到了用关系选择器。
来看代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS选择器</title><style type="text/css">.box_1h3{color: red;}.box_1p{color: greenyellow;}.box_1input{color: blue;}.box_2h3{color: pink;}.box_2p{color: violet;}.box_2input{color: orange;}</style></head><body><div class="box_1"><h3>我是h3标签</h3><p>我是段落标签</p><input type="button" value="提交" /> </div><div class="box_2"><h3>我是h3标签</h3><p>我是段落标签</p><input type="button" value="提交" /> </div></body></html>页面效果当然我们也可以将两个类别选择器换成id选择器，当然标签嵌套更多层的话，我们选择器也可以嵌套更多层，但是我们尽量让选择器之间的嵌套控制在三层。
二、动态伪类选择器是在最新的浏览器，动态伪类选择器可以给任何一个标签使用。
另外还要注意一点，写动态伪类选择器时，还要注意他的顺序，他顺序一定按照定义:link,:visited,:hover,:active的顺序定义，要不有的浏览器会识别的不是很好。
方便大家记忆我们给其取个名字叫”爱情原则”,也就是”LoVeHAte”.好了，其实我们在学习a标签的时候，我们已经注意到了只要给文字添加了超链接，文字本身就会自带颜色，而这些效果往往不是我们不想要的。
我们需要从新定义文字的状态。
我们先来看一下原始状态。
代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS选择器</title><style type="text/css"></style></head><body><a href="#">加了超链接的文字状态</a></body></html>默认添加了超链接时的状态（：link）：文字颜色为蓝色，文字带有下划线。
默认添加了超链接时的状态（：visited）：文字颜色为紫色，文字带有下划线。
默认鼠标经过时的状态（：hover）:文字颜色为蓝色，文字带有下划线。
默认鼠标点时的状态（：active）:文字颜色为红色，文字带有下划线。
以上四种状态时默认的时候的状态，不是我们想要的，如果我们想改变，就要从新设置这四种状态的样子就可以了。
（因为我们学的样式还不多，所以我们主要还是以颜色为例，其实下划线及背景颜色等都是可以改变的）请看代码：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>CSS选择器</title><style type="text/css">a:link{color:red;}/*红色*/a:visited{color:blue;}/*蓝色*/a:hover{color:greenyellow;}/*黄绿色*/a:active{color:orange;}/*橙色*/</style></head><body><a href="#">加了超链接的文字状态</a></body></html>改变之后链接时（：link）的状态：文字颜色为红色，有下划线。