web前端篇:CSS使用,样式表特征,选择器
web前端篇:css使用,样式表特征,选择器
1.css介绍
- css :cascading style sheet 层叠样式表
- 作用 :修饰和美化页面元素,实现网页排版布局
2.css使用
1行内样式/内联样式
特点 :在具体的标签中使用style属性,引入css样式代码
-
语法:
- 标签>
- css 样式声明 / 语句:
- 对当前元素添加样式
- 语法:css 属性 :值;
- 注意:css 样式声明可以是多条,<标签 style="属性:值;属性:值;"
-
常见的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 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,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 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
上一篇: FR公式形态定义及运用范例
下一篇: 判断数字是否为奇数或偶数