Python之路【第十一篇】:CSS
来源:互联网 发布:汉语大卫知乎 编辑:程序博客网 时间:2024/06/16 09:13
一.css的四种引入方式
1.行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势,不推荐使用。
<
div
style='font-size:20px;'> Hello </
div
>
2.嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下:
<
head
>
<
meta
charset="UTF-8">
<
title
>Document</
title
>
<
style
type="text/css">
div{
font-size: 20px;
}
</
style
>
</
head
>
3.导入式
将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中,使用的语法如下:
<
head
>
<
style
type="text/css">
@import"mystyle.css"; 此处要注意.css文件的路径
</
style
>
</
head
>
4.链接式
也是将一个.css文件引入到HTML文件中
<
head
>
<
link
href="mystyle.css" rel="stylesheet" type="text/css"/>
</
head
>
注意:
导入式 会在整个网页装载完后再装载CSS文件,因此这就导致了一个问题,如果网页比较大,则会先显示无样式的页面,闪烁一下之后,再出现网页的样式。这是导入式固有的一个缺陷。
使用 链接式 时与导入式不同的是它会以网页文件主体装载前装载CSS文件,因此显示出来的网页从一开始就是带样式的效果的,它不会象导入式那样先显示无样式的网页,然后再显示有样式的网页,这是链接式的优点。
样式应用顺序:
行内样式优先级最高
针对相同的样式属性,不同的样式属性将以合并的方式呈现
相同样式并且相同属性,呈现方式在<head>中的顺序决定,后面会覆盖前面属性
!important 指定样式规则应用最优先
.div {
color
:
red
!important
;
}
CSS优先级:
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。
样式表中的特殊性描述了不同规则的相对权重,它的基本规则是: 1 内联样式表的权值最高 style="" ------------------- 1000 2 统计选择符中的ID属性个数。 #id -------------100 3 统计选择符中的CLASS属性个数。 .class ------------- 10 4 统计选择符中的HTML标签名个数。 p --------------1
二 css的选择器(Selector)
“选择器”指明了{ } 中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素
1 基础选择器:
*:通用元素选择器,匹配任何元素
*{ #通配符
margin:0;
padding:0;
}
E:标签选择器,匹配所有使用E标签的元素p
div{
color:green;
}
.info和E.info: class选择器,匹配所有class属性中包含info的元素
.info{
font-size:20px;
}
p.info{
background:blue;
}
<
div
class='info'> Hello </
div
>
<
p
class='info'> World! </
div
>
#info和E#info id选择器,匹配所有id属性等于info的元素
#info{
font-size:20px;
}
p#info{
background:blue;
}
<
div
id='info'> Hello </
div
>
注意:
标签中,id的值是唯一的,而class可重复!
2 组合选择器
E,F 多元素选择器,同时匹配所有E元素或F元素,E和F之间用逗号分隔
div,p{
color:red;
}
E F 后代元素选择器,匹配所有属于E元素后代的F元素,E和F之间用空格分隔
div p{
font-size: 20px;
color:red;
}
E > F 子元素选择器,匹配所有E元素的子元素F
div > strong {
color:#f00;
}
E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F
div+p{
font-size: 20px;
color:red;
}
注意嵌套规则:
块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。
块级元素不能放在<p>里面。
有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
li内可以包含div
块级元素与块级元素并列、内联元素与内联元素并列。(错误的:<div><h2></h2><span></span></div>)
3 属性选择器
E[att] 匹配所有具有att属性的E元素,不考虑它的值。
(注意:E在此处可以省略,比如“[cheacked]”。以下同。)
div[att]{
font-size: 20px;
color: red;
}
<
div
att='abc'>Hello</
div
>
E[att=val] 匹配所有att属性等于“val”的E元素
div[att='abc']{
font-size: 20px;
color: red;
}
<
div
att='abc'>Hello</
div
>
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
div[att~='aaa']{
font-size: 20px;
color: red;
}
<
div
att='aaa bbb ccc'>Hello</
div
>
E[att|=val] 匹配所有att属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以“val”开头的E元素。
主要用于lang属性,如“en”、“en-us”、“en-gb”等等
div[att|='aaa']{
font-size: 20px;
color: red;
}
<
div
att='aaa-bbb-ccc'>Hello</
div
>
E[attr^=val] 匹配属性值以指定值开头的每个元素
E[attr$=val] 匹配属性值以指定值结尾的每个元素
E[attr*=val] 匹配属性值中包含指定值的每个元素
p:before 在每个 <p> 元素的内容之前插入内容
p:after 在每个 <p> 元素的内容之前插入内容
p:before{
content: 'Start';
color: red;
}
p:after{
content: 'Fin';
color: red;
}
<
p
>Hello</
p
>
4 伪类选择器: 专用于控制链接的显示效果,visited与active必须写在最后!! :
a:link(没有接触过的链接),用于定义了链接的常规状态。
a:hover(鼠标放在链接上的状态),用于产生视觉效果。
a:visited(访问过的链接),用于阅读文章,能清楚的判断已经访问过的链接。
a:active(在链接上按下鼠标时的状态),用于表现鼠标按下时的链接状态。
伪类选择器 : 伪类指的是标签的不同状态:
a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
三 CSS的常用属性
1 颜色属性:
color
- Python之路【第十一篇】:CSS
- 新手学Python 第十一篇 函数(一)
- Python基础学习--第十一篇(模块)
- Python之路【第十篇】:HTML
- Android入门第十一篇之TabHost,TabWidget
- Android入门第十一篇之TabHost,TabWidget
- Android入门第十一篇之TabHost,TabWidget
- Android入门第十一篇之TabHost,TabWidget .
- 第十一篇 RMAN笔记之综述
- Android入门第十一篇之TabHost,TabWidget
- 第十一篇:JAVA常用类之格式化
- 第十一篇: JAVA加密解密之Base64
- 第十一篇
- 第十一篇
- python成长之路【第十篇】:浅析python select模块
- Python之路【第一篇】:Python简介和入门
- python第十篇之-全局变量
- 初学python(对比java语言不同) 第十一篇
- java正则表达式的match.group(int group)参数详解
- 47. Permutations II
- (一)数据结构之树基本概念
- CMake使用教程
- SpringBoot系列<七>拦截器配置
- Python之路【第十一篇】:CSS
- Java 线程池理解汇总
- HTML笔记4
- LeetCode.419 Arithmetic Slices
- jquery 层次选择器
- 使用JDB调试Java程序
- H5游戏入口、迭代升级内容
- CSS-float浮动与清除浮动
- Where子句