目录
web前端篇：CSS使用，样式表特征，选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题： @H_404_4@ @H_404_4@ web前端篇：CSS使用，样式表特征，选择器 1.CSS介绍 CSS ：Cascading Style Sheet 层叠样式表 作用 ：修饰和美化页面元素，实现网页排版布局 2.CSS使用 1行内样式/内联样式特点 ：在具体的标签中使用style属性，引入CSS样式代码
语法：
<标签 > CSS 样式声明 / 语句： 对当前元素添加样式 语法：CSS 属性 ：值； 注意：CSS 样式声明可以是多条，<标签常见的CSS属性
设置字体大小：
1.属性:Font-size
2.取值 以像素为单位的数值，浏览器默认的字体大小是 16px
设置字体颜色:
1.属性：color
2.取值：颜色的英文单词或RGM(数值,数值,数值)或#b0b0b0（十六进制）
设置背景颜色
background-color 取值：颜色的英文单词或RGM(数值,数值)或#b0b0b0（十六进制）<!--行内样式--><!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title></head><body> <p >asd</p></body></HTML>2.文档内嵌/内部样式表
特点：将CSS代码与具体的标签相分离，在HTML文档中使用标签引入CSS代码。
语法：
<style> 选择器1 选择器2 选择器3 ... </style>
选择器：
1.使用文档内嵌方式引入CSS样式表时，实现了结构与样式相分离，但是需要自己定义选择器来匹配文档中元素，为其应用样式。
2.作用 ： 匹配文档元素为其应用样式。
3.语法：选择器实际上由两部分组成
选择器（符）{
属性 ：值；
属性 ：值；
}
et : 标签选择器/元素选择器： 使用标签名作为选择符，匹配文档中所有的该标签，并应用样式 p { color :green; Font-size :20px; } 注意：可以书写在文档中的任意位置，但是基于样式优先的原则，一般写在中。 3.外链方式/外部样式表 定义外部的.CSS文件，在HTML中引入即可，真正实现文档与样式表分离。 语法： 在外部的样式表中使用选择器定义样式；在HTML文档中使用 引入CSS文件 3.样式表特征 1继承性 继承性 大部分的CSS属性都是可以被继承的 子元素或者后代元素可以继承父元素中的样式 所有的文本属性都可以被继承，块元素的宽度与父元素保持一致 2.层叠性 允许为元素定义多个样式，共同起作用。
p{ color:red; background-color:blue;} 3.样式表的优先级 从低到高 从低到高 ： 浏览器缺省设置 ：浏览器默认样式 文档内嵌/外链方式 ：在不发生样式冲突时，样式共同起作用；如果发生样式冲突，后来者居上，最后定义的样式最终显示 行内样式的优先级最高 4.css选择器 作用：规范页面中哪些元素能够应用声明好的样式 目的 ：匹配页面元素 1.标签选择器/元素选择器
特点：将标签名作为选择符，来匹配文档中所有的该标签，包含后代元素
语法：
标签名{ 属性：值}标签名如a,div text-decoration : none;取消下划线
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> div{ background-color: #aaffff; Font-size:20px; } a{ text-decoration:none; } </style></head><body> <div>这是标签</div> <a href="">点一下</a></body></HTML> 2.类选择器 特点：通过元素的class属性值进行匹配
语法：
.cl{ 样式}<p >p文本</p>以英文.开头，跟上class属性值，中间没有空格 创建文件 class-selector创建几个元素 div p span h1使用类选择器为上述元素添加样式1. 文本大小为24px2. 背景颜色为橘色3. 文本斜体显示 Font-style : italic;<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> .cl{ Font-size:24px; background-color: orange; Font-style:italic; } </style></head><body> <div>这是标签</div> <p >p文本</p></body></HTML> 3.ID选择器 ID 作用：HTML中所有的元素都有一个ID属性，主要用来表示该元素在文档中的标志，具有唯一性。
ID 选择器：通过元素的ID属性值进行匹配
语法：
属性值{ 样式} 注意：通常网页中外围的结构化标签，都使用ID进行标识，具有唯一性。
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> #seq{ wIDth:100%; height:50px; background-color: pink; } </style></head><body> <span ID="seq">这是一个span文本</span></body></HTML> 4.群组选择器 作用：为多个选择器设置共同的样式。
语法：
选择器1，选择器2，选择器3{ 样式}<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> div,h1,p{ background-color: gray; margin:0;<!--外边距为0--> } </style></head><body> <h1>标题1</h1> <div>div</div> <p>p</p></body></HTML> 5.后代选择器 作用：依托于元素的后代关系来匹配元素（既包含直接子元素，也包含后代元素）。
语法：
选择器1 选择器2{ 样式｝ 在选择器1对应的元素中匹配后代元素，后代元素需满足选择器2。
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> #nav span{ border-radius:2px; background-color:RGB(204,204,204); padding-left:10px; } </style></head><body> <p ID="nav"> <span>你好</span> <span> <span>在那里</span> </span> <span>再见</span> </p></body></HTML> 6.子代选择器 作用：依托元素的子代关系进行匹配，只匹配直接子元素。
语法：
选择器1>选择器2 {｝ <!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> #nav>ul>li{ color:red; } </style></head><body> <div ID ="nav"> <ul> <li>你好</li> <li>你好<span>good<span>good</span></span></li> </ul> </div></body></HTML> 7.伪装选择器 分类：
超链接伪类选择器 动态伪类选择器作用 ：
主要是针对元素的不同状态去设置样式
超链接的不同状态
访问前 :link 访问后 :visited 激活（鼠标点按不松）:active 鼠标滑过 :hover其他元素具备
鼠标滑过 :hover 鼠标点按 :active表单控件
获取到焦点时的状态 :focus 对文本框和密码框而言，当用户点击输入时，都视为获取焦点状态伪类选择器需要与其他选择器结合使用，设置元素在不同状态下的样式。
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> a:link{ color: #8e3fff; text-decoration:none; } a:hover{ color: #ff45aa; text-decoration:none; } a:visited{ color: greenyellow; text-decoration:none; } a:active{ color:blue; text-decoration:none; } </style></head><body> <a href="#">哈哈</a></body></HTML> 注意：如果要给超链接添加四种状态下的样式，必须按照以下顺序书写伪类选择器
:link :visited :hover :active 简称 “爱恨原则 love / HAte ”8.属性选择器
通过元素的tpye实现CSS。
<!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> input[type="text"]{ background-color: red; } </style></head><body> <input type="text"></body></HTML> 9.伪元素选择器 在文本前后增加内容 <!DOCTYPE HTML><HTML lang="en"><head> <Meta charset="UTF-8"> <Title>Title</Title> <style> /*在p标签前添加元素*/ p::before{ content:"抽烟"; } /*在p标签后添加元素*/ p::after{ content:"烫头"; } </style></head><body> <p>喝酒</p></body></HTML>#设置文本第一个字符#通过伪元素添加内部为行内元素 5.选择器的优先级 当多个选择器的样式同时应用到一个元素上时，要按照不同选择器的优先级来应用样式。
div{ color:red;}#Box{ color:green;}.c1{ color:blue;}<div ID="Box" >文本</div> 判断选择器的优先级，主要看选择器的权重（权值）数值越大，优先级越高。
选择器 权值标签选择器 1类选择器/伪类 10ID选择器 100行内样式 1000
如果是复杂的选择器 （后代，子代），选择器最终的权值是各选择器权值之和
权重比较: ? ? ? 1.数选择器数量： ID 类 标签 谁大它的优先级越高，如果一样大，后面的会覆盖掉前面的属性 ? ? ? 2.选中的标签的属性优先级用于大于继承来的属性，它们是没有可比性 ? ? 3.同是继承来的属性 ? ? ? ? ? 3.1 谁描述的近，谁的优先级越高 ? ? ? ? ? 3.2 描述的一样近，这个时候才回归到数选择器的数6.练习题：
1.div和span标签在网页中的作用？
div将网站分割成独立的逻辑区域division分割span:小区域标签，在不影响文本正常显示的情况下，单独设置对应的样式。<style> span.active{ Font-weight:bold; }</style><p> <span>内容</span></p> 2.CSS基础选择器和高级选择器有哪些？
- 基础选择器 - 类选择器 - 标签选择器 - ID选择器- 高级选择器 - 后代选择器 - 子代选择器 - 组合选择器 - 交集选择器 - 伪装选择器 （link visited hover active） - 伪元素选择器
3.盒子模型的属性有哪些？并说明属性的含义，画出盒子模型图？
- wIDth:内容宽度- height:内容的高度- border:边框- padding:内边距- margin:外边距
4.如何让文本垂直和水平居中?
<style> div{ wIDth:200px; height:60px; text-align:center; line-height:60px; }</style><div> wusir</div>让行高等于盒模型的高度实现垂直居中使用text-align:center;实现文本水平居中 5.如何清除a标签的下划线？
text-decoration:none;none:无线，underline:下划线,overline:上划线,line-through:删除线.
6.如何重置网页样式？
HTML,body,p,ul,ol{ margin: 0; padding: 0;}/*通配符选择器 */*{ margin: 0; padding: 0;}a{ text-decoration: none;}input,textarea{ border: none; outline: none;} 7.如何清除input和textarea标签的默认边框和外线？
border:0;outline:0;
8.在CSS中哪些属性是可以继承下来的？
1.字体系列属性：Font-family:字体系列Font-weight:字体的粗细Font-size:字体的大小fnot-style:字体的风格2.文本系列属性text-indent:文本缩进text-align:文本水平对齐line-height:行高word-spacing:单词之间的间距letter-spacing:中文或者字母之间的间距text-transform:控制文本大小color:文本颜色3.元素可见性visibility:控制元素显示隐藏4.列表布局属性List-style列表风格，包括List-style-type,List-style-image5.光标属性：cursor:光标显示为何种形态color,text-xxx,Font-xxx,line-height,letter-spacing,word-spacing
9.如何正确比较CSS中的权重？
如果选中了标签 数选择器的数量 ID class 标签 谁大优先级越高 如果一样大，后面优先级越大 如果没有选中标签，当前属性是被继承下来，他们的权重为0，与选中的标签没有可比性 都是继承来的，谁描述的近，就显示谁的属性（就近（选中的标签越近）原则），如果描述的一样近，继续数选择器的数量。 !important 它设置当前属性的权重为无限大，大不过行内样式的优先级
10.块级标签和行内标签?
块级标签:1.可以设置高度，如果不设置宽度，默认是父标签的100%的宽度2.独占一行pdivulollih1~h6tabletrform行内标签：1.不可以设置宽高2.在一行内显示a spanbstrongemi行内块标签1.可以设置宽高2.在一行内显示inputimg@H_404_4@ @H_404_4@ @H_404_4@ 总结
以上是内存溢出为你收集整理的web前端篇：CSS使用，样式表特征，选择器全部内容，希望文章能够帮你解决web前端篇：CSS使用，样式表特征，选择器所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）