【CSS】CSS-三种样式+样式选择器+属性

格式：ppt
大小：338.00 KB
文档页数：21

下载文档原格式

/ 21

css选择器的三种基本类型

css选择器的三种基本类型CSS选择器是用来定位HTML页面中要使用样式的不同元素的方式。

通过不同的选择器，我们可以定位单个元素，以及多个具有相同样式的元素。

在CSS中，有三种基本类型的选择器：元素选择器、id选择器和类选择器。

第一种是元素选择器，也称为标签选择器。

这种选择器是通过HTML标签的名称来匹配元素的。

例如，要选择所有段落元素，就可以用p选择器，如下所示：```p {color: red;}```这将把所有的段落元素的文本颜色设置为红色。

如果你只希望选择某个特定的元素，可以使用类或ID选择器。

第二种是id选择器，这种选择器是通过元素的id属性来定位元素的。

id属性是唯一的，因此可以使用id选择器来针对特定的元素。

例如，在以下HTML中：```<div id="header"><h1>My Header</h1></div>```要选择标题元素，可以使用以下选择器：```#header h1 {font-size: 24px;}这将选择具有id“header”的div元素中的标题元素，并将其字体大小设置为24像素。

在CSS中，id选择器使用“#”符号指定。

第三种是类选择器，这种选择器是通过元素的class属性来选择元素的。

class属性允许您为多个元素指定共同的样式。

在以下HTML 中：```<p class="intro">This is an introduction.</p><p class="intro">This is another introduction.</p>```要选择具有类“intro”的所有段落元素，则可以使用以下选择器：```p.intro {font-size: 14px;}这将选择所有具有类“intro”的段落元素，并将它们的字体大小设置为14像素。

css样式的六种选择器

css样式的六种选择器css常⽤的选择器有：1.标签选择器：标签选择器，这种选择器影响范围⼤，建议尽量应⽤在层级选择器中。

如：*{margin:0;padding:0} /* 影响所有的标签 */div{color:red} /* 影响所有的div标签 */<div>......</div> <div class=”box”>......</div> 2.id选择器：通过id名来选择元素，元素的id名称不能重复，所以⼀个样式设置项只能对应于页⾯上⼀个元素，不能复⽤，id名⼀般给程序使⽤，所以不推荐使⽤id作为选择器。

id是所有标签的属性，所有标签都有id属性，写代码时id的值是不允许重复的如：#box{color:red}<div id=”box”>......</div> 3.类选择器：（常⽤）通过类名来选择元素，⼀个类可应⽤于多个元素，⼀个元素上也可以使⽤多个类，应⽤灵活，可复⽤，是css中应⽤最多的⼀种选择器。

如：.red{color:red}.big{font-size:20px}.mt10{margin-top:10px}<div class=”red”>......</div>4.层级选择器：主要应⽤在选择⽗元素下的⼦元素，或者⼦元素下⾯的⼦元素，可与标签元素结合使⽤，减少命名，同时也可以通过层级，防⽌命名冲突。

如：.box span{color:red}.box .red{color:pink}.red{color:red}<div class=”box”><span>......</span><a href=”#” class=”red”>......</a></div><h3 class=”red”>......</h3>层级选择器最好不要超过四层，否则会影响性能。

css样式,后代选择器

css样式,后代选择器css介绍CSS(层叠样式表)定义如何显⽰HTML元素，给HTML设置样式，让它更加美观。

当浏览器读到⼀个样式表，它就会按照这个样式表来对⽂档进⾏格式化（渲染）。

css语法(下图所⽰)每个CSS样式由两个组成部分：选择器(标签名)和声明(包括属性和属性值),每个声明之后⽤分号结束。

css注释写法/*这是注释*/css的引⼊⽅式⾏内样式(是在标记的style属性中设定CSS样式。

)<p style="color: red">Hello world.</p>内部样式<head><meta charset="UTF-8"><title>Title</title><style>p{background-color: #2b99ff;}</style></head>外接样式(将css写在⼀个单独的⽂件中，然后在页⾯进⾏引⼊即可) 常⽤1.<link href="mystyle.css" rel="stylesheet" type="text/css"/> #现在写的这个.css⽂件是和你的html是⼀个⽬录下;如果不是⼀个⽬录，href⾥⾯要写上这个.css⽂件的路径2.<style type="text/css"> @import url('./index.css'); </style>CSS选择器(找到对应的标签) 基本选择器: 1.标签选择器 2.id选择器 3.类选择器1.标签选择器(可以选中所有的标签元素，⽐如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，⽽不是某⼀个)body{color:gray;font-size: 12px;}2.id选择器(# 选中id)#同⼀个页⾯中id不能重复。

css选择器四大类：基本、组合、属性、伪类

css选择器四⼤类：基本、组合、属性、伪类什么是选择器？选择器的作⽤是通过它可以找到元素，把css样式传递给元素！css选择器主要分为：基本选择器、属性选择器、组合选择器与伪类选择器四个⼤类！css基本选择器基本选择器⼜分为：*通配符、标签选择器、class选择器、id选择器，在这⾥需要注意的编程思想在css层叠样式表中元素有且仅有⼀个id。

注意以下⼏点1.id唯⼀性2.元素id不相同，就像每⼀个⼈只有⼀个⾝份证⼀样，ID就代表⾝份证3.class选择器不具有唯⼀性，它可以重复使⽤！此外这个*通配符代表的是全局1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>css基本选择器</title>7<style type="text/css">8 *{9 color: skyblue;10 }/**通配符*/11 div{12 color: red;13 }/*标签选择器*/14 .box{15 color: steelblue;16 }/*class选择器*/.box{color: steelblue;}也可以写成*.box{color: steelblue;}代表的所有的box字体颜⾊为 steelblue17 #content{18 color: tomato;19 }/*id选择器*/20</style>21</head>22<body>23<div class="box" id="content">24⼤灰⽜博客专注web前端技术学习25</div>26</body>27</html>css组合选择器把基本选择器通过特殊符号串在⼀起有意见称之为css组合选择器，常见的css组合选择器有：分组选择器、嵌套选择器、⼦选择器、相邻同级别选择器1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>css组合选择器</title>7<style type="text/css">8/* div{9 color: teal;10 font-size: 24px;11 }12 p{13 color: teal;14 } */15 div{16 font-size: 24px;17 }18 div,p{19 color: teal;20 }/*分组选择器*/21 div p{22 color: red;23 }/*嵌套选择器*/24 ul>li{25 font-size: 24px;26 list-style: square;27 }/*⼦选择器*/28 div+p{29 color: blue;30 }/*相邻同级别选择器*/31</style>32</head>33<body>34<div>35成功的花,⼈们只惊羡她现时的明艳!然⽽当初她的芽⼉,浸透了奋⽃的泪泉,洒遍了牺牲的⾎⾬36<p>⾃以为懂得很多了经历很多了最后才知道都是那么的可笑</p>37</div>38<p>我们不要只看成功者荣誉的瞬间,更要看到成功者为之努⼒、为之奋⽃的过程,从⽽激励⾃⼰也不断付出,奔着那个成功的⽬标前进.</p>39<p>成功的花,⼈们只惊羡她现时的明艳!然⽽当初她的芽⼉,浸透了奋⽃的泪泉,洒遍了牺牲的⾎⾬<span>我们不要只看成功者荣誉的瞬间,更要看到成功者为之努⼒、为之奋⽃的过程,从⽽激励⾃⼰也不断付出,奔着那个成功的⽬标前进. 40<ul>41<li>1</li>42<li>2</li>43<li>3</li>44</ul>45</body>46</html>css属性选择器基本选择器[属性]、基本选择器[属性=值]、基本选择器[属性~=值]空格符隔开多个、基本选择器[属性^=值]以什么开始、基本选择器[属性$=值]以什么结束1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<meta name="viewport" content="width=device-width, initial-scale=1.0">6<title>css属性选择器</title>7<style type="text/css">8 div[title]/*基本选择器[属性]*/9 div[title=english]{10 color: blue;11 }/*基本选择器[属性=值]*/12 div[title~=en]{13 color:#f90;14 font-weight: bold;15 }/*基本选择器[属性~=值] 任意包含有属性中的⼀个*/16 p,div[title^=zh]{17 font-size:24px;18 color: brown;19 }/*基本选择器[属性^=值]以什么开始*/20 div[title$=china]{21 letter-spacing: 10px;22 text-decoration: line-through;23 font-style: italic;24 }/*基本选择器[属性$=值]以什么结束*/25</style>26</head>27<body>28<div title="english">29 If you can NOT explain it simply, you do NOT understand it well enough30</div>31<div title="english en yingyu">32你们没发现嘛？2013爱你⼀⽣，2014爱你⼀世，2015爱你⼀屋，2016爱你⼀路，2017爱你⼀切，2018爱你⼀半，2019爱你依旧，2020爱你爱你，2021爱你⽽已33</div>34<p title="zh en">35 css选择器四⼤类：基本、组合、属性、伪类36</p>37<div title="zh en china">38 /dhnblog/p/12293463.html39</div>40</body>41</html>css伪类选择器从字⾯意思来讲，伪就是假的，元素是标签与标签包裹的内容，简单来说伪元素就是假的元素，假的反义词是真的，在页⾯中这些⼜是我们⾃⼰写的，所以它是真的。

CSS-----css三种样式以及css选择器的优先级问题

CSS-----css三种样式以及css选择器的优先级问题
css三种样式的优先级问题：
css⼀般三种使⽤样式为：内联式、内嵌式、外部式
内联式即在html的标签中书写样式；
内嵌式即css样式写在<style type="text/css">XXX</style>中，style 是在head标签⾥⾯；
外部式即通过link标签来引⽤，外部的css⽂件来控制标签样式，但是要放在sytle标签外head标签⾥。

css选择器的使用

css选择器的使⽤css选择器的使⽤⽅法今天给⼤家分享⼀下css常⽤的选择器使⽤。

⾸先我们先了解⼀下为什么要使⽤选择器。

引⼊、要使⽤css对HTML页⾯中的元素实现⼀对⼀，⼀对多或者多对⼀的控制，这就需要⽤到CSS选择器。

HTML页⾯中的元素就是通过CSS选择器进⾏控制的，这就要⽤到我们的css选择器。

选择器的类别：1. 类型选择器2. id选择器3. class选择器4. 通⽤选择器5. 群组选择器6. 后代选择器7. 伪类选择器8. 属性选择器9. 层级选择器10. ...⼀、类型选择器的⽤法：样式：<style>div{width: 500px;height: 500px;background: #000;}</style>结构：<body><div></div></body><style>div{width: 500px;height: 500px;background: #000;}</style><body><div></div></body>运⾏结果：css通过类名来控制改变样式代码如下：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box{width: 200px;height: 100px;background: rgb(248, 2, 2);}</style></head><body><div id="box"></div></body></html>　id选择器⽤法给标签取⼀个id=“名称”的属性与属性值，属性值是⾃⼰命名。

【CSS】CSS样式的三种格式：内嵌样式、内部样式、外部样式

【CSS】CSS样式的三种格式：内嵌样式、内部样式、外部样式CSS 样式有三种格式：内嵌样式、内部样式和外部样式。

内嵌样式⼜称⾏内样式，将 CSS 样式嵌⼊到 HTML 标签中。

<p style="width:300px; color:yellow; background-color:red; border:dotted thin blue; text-align:center;">内嵌样式</p>内部样式表将 CSS 样式从 HTML 标签中分离出来，使得 HTML 代码更加整洁，⽽且 CSS 样式可以被多次利⽤。

内部样式写在 <style> 标签中，构成内部样式表，仅对当前页⾯有效。

⼀般情况下，<style> 标签位于 <head> 标签内。

在页⾯加载过程中，先加载样式，后加载页⾯元素。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>test</title><style type="text/css">p{width:300px;color:yellow;background-color:red;border:dotted thin blue;text-align:center;}</style></head><body><p>内部样式1</p><p>内部样式2</p></body></html>外部样式表外部样式写在独⽴的⽂件中，构成外部样式表，页⾯在使⽤某⼀样式时，需要引⼊外部样式所在⽂件。

⽹站统⼀引⽤同⼀外部样式表，使页⾯风格保持⼀致，有利于页⾯样式的维护与更新，从⽽降低⽹站的维护成本。

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代码时，建议将样式属性单独分行展示，以增加代码的可读性和维护性。

css3多类选择器用法

css3多类选择器用法================CSS3的出现，无疑为网页设计带来了更多的可能性。

其中，多类选择器（MultipleClassSelectors）是一种非常实用的新特性，它允许我们在同一个元素上应用多个类。

这对于那些需要动态改变样式，或者需要在不同的地方使用同一元素的不同样式的情况来说，是非常有用的。

###多类选择器的定义和用法在CSS中，类选择器以点（.）开始，后面跟着的是类的名称。

多类选择器允许你在一个元素上应用多个类。

只需在类名之间用空格分隔即可。

例如，假设我们有一个div元素，我们希望根据其内容和状态应用不同的样式：```html<divclass="class1class2class3">我是一个div元素</div>```我们可以在CSS中使用多类选择器来为这个元素应用不同的样式：```css.class1{color:red;}.class2{background-color:yellow;}.class3{font-size:20px;}```这样，当这个div元素的类为"class1"时，它的文字颜色会是红色；当它的类为"class2"时，背景色会变成黄色；当它的类为"class3"时，字体大小会变为20px。

###多类选择器的优势使用多类选择器，你可以在一个元素上应用多个样式，而无需为每个样式创建单独的元素。

这大大提高了代码的效率和可读性，也使得网页布局更加灵活和动态。

此外，多类选择器还允许你在不同的地方使用同一元素的不同样式，这在响应式设计中尤其重要。

###多类选择器的限制和注意事项虽然多类选择器非常有用，但也有一些限制和注意事项：1.类的数量：理论上，你可以在同一个元素上应用无限个类，但是这可能会影响网页的性能，因为每个额外的类都需要额外的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)。

文本
12
Part4 CSS样式
样式表格边框表格折叠边框文本对齐宽度和高度分类 border border-collapse：collapse text-align width，height 属性
13
Part4 CSS样式
背景样式：用于设置背景的一系列css属性
14
Part4 CSS样式
Part3 CSS选择器
选择器后代选择器子元素选择器
示例 h1 em {color:red;} h1 > strong {color:red;}
说明 h1中的em元素 h1中直接的strong元素紧接在h1后的p元素
相邻兄弟选择器 h1 + p {margin-top:50px;}
11
Part4 CSS样式
7
Part3 CSS选择器
选择器示例说明
元素选择器
选择器分组
html {color:black;}
文档的元素就是最基本的选择器
/* 不分组*/ 将任意多个选择器分组在一起， h1 {color:blue;} h2 {color:blue;} 选择器之间用逗号分隔 h3 {color:blue;} h4 {color:blue;} h5 {color:blue;} h6 {color:blue;} /* 分组 */ h1, h2, h3, h4, h5, h6 {color:blue;} <h1 id="intro”>this is intro</h1> #intro { font-weight:bold; } #元素ID值，来选择HTML中某个指定的元素因为是ID，所以可以在所属 HTML中唯一确定一个元素注意ID值大小写敏感
第二阶段-Web
第5课 CSS基础
Part 1 Part 2 CSS概述 CSS基础语法，继承 CSS选择器：元素，分组，id，伪类，伪元素，属性，派生，后代，子元素，相邻兄弟样式属性：背景，文本，字体，链接，表格定位：普通流，相对定位，绝对定位，浮动
Part 3
Part 4 Part 5
2
body { font-family: Verdana, sans-serif ; }
通过 CSS 继承，子元素将继承最高级元素（在本例中是 body）所拥有的属性（这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd）。不需要另外的规则，所有 body 的子元素都应该显示 Verdana 字体，子元素的子元素也一样。
Part1 CSS概述
CSS 指层叠样式表 (Cascading Style Sheets)
• 样式定义如何显示 HTML 元素 • 样式通常存储在样式表中 • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题 • 外部样式表可以极大提高工作效率 • 外部样式表通常存储在 CSS 文件中 • 多个样式定义可层叠为一
background属性将背景属性设置在一个声明中 body { background: #00FF00 url(bgimage.gif) no-repeat fixed top; } background-attachment属性设置背景图像的滚动 body { background-image: url(bgimage.gif); background-attachment: fixed; } background-color属性设置元素的背景颜色 body { background-color:yellow; } h1 { background-color:#00ff00; } p { background-color:rgb(255,0,255); }
样式背景颜色背景背景图像分类属性 background-color background-image
ቤተ መጻሕፍቲ ባይዱ
背景重复
背景定位文本颜色文本大小文本字体文本缩进水平对齐
background-repeat
background-position color font-size font-family text-indent text-align
未访问的链接已访问的链接鼠标移动到链接上选定的链接拥有键盘输入焦点的元素元素的第一个子元素
9
Part3 CSS选择器
选择器示例说明 :first-letter，第一个字符 :first-line，第一行 :before，之前 :after，之后伪元素选择器 p:first-letter { color:#ff0000;} p:first-line { color:#ff0000; } h1:before { content:url(beep.wav); } h1:after { content:url(beep.wav); } 属性选择器 a[href] {color:red;} a[href][title] {color:red;}
5
Part2 CSS基础语法，继承
CSS 的基本构成
selector { property : value ; …… }
属性属性值
属性
属性值
h1
选择器
{ color : red ; font-size : 14px; }
样式声明样式声明
6
Part2 CSS基础语法，继承
CSS 的继承：子元素从父元素继承属性
15
Part4 CSS样式
background-image 属性为元素设置背景图像
body { background-image: url(bgimage.gif);}
background-position 属性设置背景图像的位置
body{background-position:center;} top，bottom，left，right，center body{background-position: 30% 20%;} 左上0%，0%，右下100%,100% body{background-position: 50px 100px;} 左上0,0,
16
Part4 CSS样式
background-repeat 属性设置是否及如何重复背景图像 body{background-repeat: repeat-y;}
17
Part4 CSS样式
Border属性设置表格边框
table, th, td { border : 1px solid blue ; } 边框颜色边框类型边框粗细
3
Part1 CSS概述
CSS 样式的三种使用方式 • 在html元素的style属性中定义，不需要选择器，只对该元素有效 • 在html中使用<style>标签，需要使用选择器，只对该html文档有效。 • 在html中使用<link>标签，连接外部css文件，需要使用选择器，该 css文件可被多个html共同连接
伪类选择器
a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF} input:focus{border：1px;} ul:first-child{color:red;}
匹配有href属性的a标签元素匹配有href和title属性的a标签元素 a[hrefcolor:red;} 匹配href属性值以www整词开头的 a[href^=‘www’]{color:red;} 匹配href属性值以www开头的 a[href$=‘com’]{color:red;} 匹配href属性值以com结尾的 a[href*=‘www’]{color:red;} 匹配href属性值包含www的 10
那么，这三种方式共同使用时，如何层叠？
4
Part1 CSS概述
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、 <p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、 “这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。所有的主流浏览器均支持层叠样式表。
18
Part4 CSS样式
Border属性设置表格边框
19
Part4 CSS样式
做一个漂亮点的表格
20
Thanks
你可以自由分发此PPT，但不得用于商业用途。转发请保留此版权信息。
谢钟扬 1137409632 antonio_xie@
ID选择器
8
Part3 CSS选择器
选择器类选择器示例 <h1 class="important"> This is very important. </h1> .important {color:red;} <h1 class=“important big”>This is very important.</h1> .big{font-size:48px;} 说明 .类名，类名前面加上点号类选择器选中HTML所有class 属性值匹配的元素多类选择：在html元素的class 中，可以填写多个类名，用空格分隔，那么将在该元素上层叠显示这些类的样式