web前端篇：CSS使用，样式表特征，选择器
web前端篇：CSS使用，样式表特征，选择器
1.CSS介绍
- CSS ：Cascading Style Sheet 层叠样式表
- 做用 ：修饰和美化页面元素，实现网页排版布局
2.CSS使用
1行内样式/内联样式
特色 ：在具体的标签中使用style属性，引入CSS样式代码html
语法：前端
- <标签 style="CSS 样式声明">
- CSS 样式声明 / 语句：
- 对当前元素添加样式
- 语法：CSS 属性 ：值；
- 注意：CSS 样式声明能够是多条，<标签 style="属性:值；属性:值；"
常见的CSS属性web
设置字体大小：浏览器
1.属性:font-size布局
2.取值 以像素为单位的数值，浏览器默认的字体大小是 16px字体
设置字体颜色:网站
1.属性：colorurl
2.取值：颜色的英文单词或RGM(数值,数值,数值)或#b0b0b0（十六进制）spa
设置背景颜色
- background-color
- 取值：颜色的英文单词或RGM(数值,数值,数值)或#b0b0b0（十六进制）
<!--行内样式--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p style="background: red;color:RGB(123,145,164);font-size: 19px;">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,divtext-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 class="cl">p文本</p> 以英文.开头，跟上class属性值，中间没有空格
建立文件 class-selector
建立几个元素 div p span h1
使用类选择器为上述元素添加样式
1. 文本大小为24px
2. 背景颜色为橘色
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 class="cl">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" class="c1">文本</div>判断选择器的优先级，主要看选择器的权重（权值）数值越大，优先级越高。
选择器 权值 标签选择器 1 类选择器/伪类 10 id选择器 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-image 5.光标属性： cursor:光标显示为什么种形态 color,text-xxx,font-xxx,line-height,letter-spacing,word-spacing
9.如何正确比较css中的权重？
若是选中了标签
数选择器的数量 id class 标签 谁大优先级越高 若是同样大，后面优先级越大
若是没有选中标签，当前属性是被继承下来，他们的权重为0，与选中的标签没有可比性
都是继承来的，谁描述的近，就显示谁的属性（就近（选中的标签越近）原则），若是描述的同样近，继续数选择器的数量。
!important 它设置当前属性的权重为无限大，大不过行内样式的优先级
10.块级标签和行内标签?
块级标签: 1.能够设置高度，若是不设置宽度，默认是父标签的100%的宽度 2.独占一行 p div ul ol li h1~h6 table tr form 行内标签： 1.不能够设置宽高 2.在一行内显示 a span b strong em i 行内块标签 1.能够设置宽高 2.在一行内显示 input img
相关文章
- 1. web前端篇:CSS使用，样式表特征
- 2. WEB前端-CSS-选择器&经常使用样式/属性
- 3. web前端篇:CSS选择器
- 4. 【Web前端】CSS选择器
- 5. 【Web 前端】CSS选择器
- 6. web前端——css选择器
- 7. 前端之css样式（选择器）。。。
- 8. 前端 之 CSS选择器、样式
- 9. css css样式表 选择器 声明
- 10. CSS样式表：三种使用方式、CSS选择器
- 更多相关文章...
- • Web 品质 - 样式表 - 网站品质教程
- • Scala Trait(特征) - Scala教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Docker容器实战(一) - 封神Server端技术
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章