博客园
CSS篇
1.为什么学习css
-
html的缺陷
-
不能够适应多种设备
-
要求浏览器必须足够智能足够庞大
-
数据和显示没有分开
-
功能不够强大
-
-
css的优点
-
使数据和显示分开
-
降低网络的流量
-
使整个网站视觉效果一致
-
使开发效率提高了(耦合性降低,一个负责写html,一个负责写css)
-
2.css的引入方法
-
行内样式
-
<div>
<p style="color: green">我是一个段落</p>
</div>
-
-
内接样式
-
<style type="text/css">
/*写我们的css代码*/
span{
color: yellow;
}
</style>
-
-
外接样式-链接式
-
<link rel="stylesheet" href="./index.css">html
-
-
外接样式-导入式
-
<style type="text/css">
@import url('./index.css');
</style>
-
3.css选择器
-
标签选择器(标签名)
-
标签选择器可以选中所有的标签元素,比如div,ul,li,p等,不管标签隐藏的多深,都能选中所有的标签,
-
-
类选择器
-
类就是class,任何的标签都可以加类,类可以重复,适于归类的概念,同一个标签中可以携带多个类,用空格隔开
-
.lv{
color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
-
<!-- 公共类 共有的属性 -->
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p>
</div>
-
-
-
id选择器
-
同一个页面中id不能重复,任何的标签都可以设置id,id命名规范,要以数字,下划线大小写严格区分,aa和AA就是两个不一样的属性值
-
css
#box{
background:green;
}
#s1{
color: red;
}
#s2{
font-size: 30px;
}html
<body>
<div id="box">娃哈哈</div>
<div id="s1">爽歪歪</div>
<div id="s2">QQ星</div>
</body>
-
-
高级选择器
-
后代选择器
-
用空格表示后代选择器
-
.container p{
color: red;
}
.container .item p{
color: yellow;
}
-
-
子代选择器
-
用>表示子代选择器,比如div>p,仅仅表示的是当前div元素选中的子代(不包括孙子)元素P
-
.container>p{
color: yellowgreen;
}
-
-
并集选择器
-
/*并集选择器*/
h3,a{
color: #008000;
text-decoration: none;
} -
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
margin: 0;
padding: 0
}
/*使用此并集选择器选中页面中所有的标签，页面布局的时候会使用*/
-
-
交集选择器
-
使用 . 表示交集选择器,第一个标签名必须是标签选择器,第二个标签必须是类选择器,语法:div.active,比如有一个< h4 class='active' >< h4> 这样的标签,name它表示两者选中之后元素共有的特性
-
h4{
width: 100px;
font-size: 14px;
}
.active{
color: red;
text-decoration: underline;
}
/* 交集选择器 */
h4.active{
background: #00BFFF;
}
-
-
-
更多选择器
-
伪类选择器
-
伪类悬着器一般会使用在超链接a标签中
/*link表示没有被访问的a标签的样式*/
.box ul li.item1 a:link{
color: #666;
}
/*visited表示访问过后的a标签的样式*/
.box ul li.item2 a:visited{
color: yellow;
}
/*hover表示鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{
color: green;
}
/*active表示鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{
color: yellowgreen;
}
-
-
伪标签选择器(伪元素选择器)
-
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px;
}
/* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:'alex';
}
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
p:after{
content:'&';
color: red;
font-size: 40px;
}
-
-
属性选择器
-
/*根据for属性查找，找到所有又for属性的，设置字体颜色为红色*/
/*[for]{
color: red;
}*/
/*找到for属性的值等于username的元素 字体颜色设为黄色*/
/*[for='username']{
color: yellow;
}*/
/*以....开头 ^*/
/*[for^='user']{
color: #008000;
}*/
/*以....结尾 $*/
/*[for$='vvip']{
color: red;
}*/
/*包含某元素的标签*/
/*[for*="vip"]{
color: #00BFFF;
}*/
/*指定标签的for属性
其中for属性的值是以空格隔开的值列表，
user1是值列表中的一个独立值*/
label[for~='user1']{
color: red;
}
input[type='text']{
background: red;
}
-
-
4.选择器权重
-
当同一个标签有多重样式,遇到重叠项的设置又该听谁的呢,这就涉及到权重的问题了,
-
行内样式 1000>id选择器 100>类选择器 10>标签选择器 1>继承样式
-
css的两大特性:继承性和层叠性
-
继承性:给父级设置一些属性,子级继承父级的该属性,这就是css中的继承
-
继承规则
-
面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。
记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承
-
-
层叠性:权重大的标签覆盖掉权重小的标签,谁的权重大就显示谁的标签
-
-
权重比较
-
权重一样的时候,是以后来设置的属性为准,
-
权重都是0,那么就遵循就近原则,谁描述的近,就使用谁的属性,谁描述的近,就是选中到最内层的距离越近
-
-
! import:设置为权重无限大
-
它不影响继承来的权重,只影响选中的元素,不要随便使用,以为他会影响页面的布局
-
-
使用什么选择器?
-
-
每个类尽可能的小,要有公共的概念,能让更多的标签使用.
-
在css中尽可能的使用classs,除非一些特殊的情况可以用id,id一般是用在js中的,也就是说js是通过id来获取到标签
-
-
选择器的选择
-
先看标签元素有没有被选中,如果被选中了,就数数(id,class,标签的数量) 谁的权重大,就显示谁的属性,权重一样大,后来者居上
-
如果没有被选中标签,权重为0
-
如果属性都是被继承下来的,权重都是0,就近原则,谁描述的近就显示谁的属性
-