博客园
html的缺陷
不能够适应多种设备
要求浏览器必须足够智能足够庞大
数据和显示没有分开
功能不够强大
css的优点
使数据和显示分开
降低网络的流量
使整个网站视觉效果一致
使开发效率提高了(耦合性降低,一个负责写html,一个负责写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>标签选择器(标签名)
标签选择器可以选中所有的标签元素,比如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; }当同一个标签有多重样式,遇到重叠项的设置又该听谁的呢,这就涉及到权重的问题了,
行内样式 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,就近原则,谁描述的近就显示谁的属性
回到顶部
转载于:https://www.cnblogs.com/W-Y-C/p/11322293.html
