CSS属性操作
1 属性选择器
Elenment(元素)
E[att] 匹配所有具有att属性的E元素,不考虑它的值。(注意:E在此处可以省略)(推荐使用)
例如:[po]{
font-size: 50px;
color: #99cc99;
}
div[po]{
color: antiquewhite;
font-size: 50px;
}
E[att=val] 匹配所有att属性等于“val”的E元素(推荐使用)
div[po="p2"]{
color: aqua;
font-size: 60px;
} [po="p2"]{
color: aquamarine;
font-size: 60px;
}
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
div[po~="p3"]{
color: #FF0000;
font-size: 50px;
<div po="p2 p p3" class="c2">top</div>
E[att^=val] 匹配属性值以指定开头的每个元素
div[po^="p"]{
font-size: 100px;
color: #99cc99;
}
<div po="p1" class="c1">hellopython</div>
<div po="p2 p p3" class="c2">top</div>
E[attr$=val] 匹配属性值以指定值结尾的每个元素
div[po$="p"]{
color: antiquewhite;
}
<div po="s4p" class="c3">top1</div>
E[attr*=val] 匹配属性值中包含指定值得每个元素
<div po="s4p4gj" class="c3">top1</div>
div[po*="p4"]{
color: #99cc99;
}
#class 属性可以有多个值 通过空格隔开 相当于class=c1 class=btn
.c1{
color: #2459a2;
}
.btn{
font-size: 100px;
} <!--</style>-->
<div po="p1" class="c1 btn">hellopython</div>
2 CSS选择器的优先级
css的继承
继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的,继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如body定义了的颜色也会应用到段落的文本中。
#p标签也继承了div标签 颜色都会变红
div{
color: red;
} <div class="d1" id="id1">
DIV
<P>PPP</P>
</div> body{
color: #99cc99;
}
这段文字都继承了由body {color:red;}样式定义的颜色。然而CSS继承性的权重是非常低的,是比普通元素的权重还要低的
0
<body>
<div class="d1" id="id1">
DIV
<P>PPP</P>
</div>
<p>hello</p>
</body>
此外,继承是CSS重要的一部分,我们甚至不用去考虑它为什么能够这样,但CSS继承也是有限制的。有一些属性不能被继承,如:border, margin, padding, background等。
div{
border: 5px;
border-color: antiquewhite;
}
<div class="d1" id="id1">
DIV
<P>PPP</P>
css的优先级
!important优先级高于一切
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序
样式表中的特殊性描述了不同规则的相对权重,他的基本规则是:
1 内联样式表的权值最高 style=“”------1000;’
2 统计选择符中的ID属性个数 #id--------100
3 统计选择符中的CLASS属性个数 class-----10
3 统计选择符中的HTML标签名个数 p--------1
按这些规则将数字符串诸位相加,就得到最终的权重,然后在比较取舍时按照从左到右的顺序逐位比较。
1、文内的样式优先级为1,0,0,0 所以始终高于外部定义。
2、有!important声明的规则高于一切。
3、如果!important声明冲突,则比较优先权。
4 、如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。
5、由继承而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)
#同一级别的比较优先级的话,下面的优先级比上面的优先级高
.d1{
background-color: #2459a2;
}
.d2{
background-color: antiquewhite;
}
div p{
background-color: #2459a2;
}
.d1 p{
background-color: #99cc99;
}
.p1{
background-color: bisque;
}
#id1 .p1{
background-color: burlywood; #优先级最高 } <div class="d1 d2" id="id1" >
DIV
<P class="p1">PPP</P>
</div>
3 CSS属性操作
3.1 css text
文本颜色:color
颜色属性被用来设置文字的颜色
颜色是通过CSS最经常的指定
十六进制值-如:#FF0000
一个RGB值-如:RGB(255,0,0)
颜色的名称-如:red
p{
color: RGB(255,0,0);
}
div{
color: RGB(0,255,0);
} p{
color:#2459a2;
} p{
color:brown;
}
p{
color:brown;
opacity: 0.9; #透明度
}
3.2 水平对其方式
text-align 属性规定元素中的文本的水平对其方式。
left 把文本排列到左边。默认值:由浏览器决定。
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对其文本效果
一般况下默认为左边,可以通过text-align 调试
div{
width: 200px;
height: 200px;
background-color: #2459a2;
text-align: center;
}
<div>hello</div> 标题居中对齐,文本两端对齐 时间右对齐
h1{
text-align: center;
}
.publish_time{
text-align: right;
}
.content{
text-align: justify;
} <h1>CSS text-align 水平居中</h1>
<p class="publish_time">2017年5月17日</p>
<p class="content">
有个落拓不得志的中年人每隔三两天就到教堂祈祷,而且他的祷告词几乎每次都相同。第一次他到教堂时,
跪在圣坛前,虔诚地低语:“上帝啊,请念在我多年来敬畏您的份上。让我中一次彩票吧!阿门。”
几天后,他又垂头丧气回到教堂,同样跪着祈祷:“上帝啊,为何不让我中彩票?我愿意更谦卑地来
服侍你,求您让我中一次彩票吧!阿门。”又过了几天,他再次出现在教堂,同样重复他的祈祷。如此周而
复始,不间断地祈求着。到了最后一次,他跪着:“我的上帝,为何您不垂听我的祈求?让我中一次彩票吧!
只要一次,让我解决所有困难,我愿终身奉献,专心侍奉您……”就在这时,圣坛上发出一阵宏伟庄严的声
音:“我一直垂听你的祷告。可是最起码?你也该先去买一张彩票吧!”</p>
<p><b>注意:</b>重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
其他文本属性
/* font-size: 10px; line-height: 200px; 文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比 vertical-align:-4px 设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效 text-decoration:none text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线 font-family: 'Lucida Bright' font-weight: lighter/bold/border/ font-style: oblique text-indent: 150px; 首行缩进150px letter-spacing: 10px; 字母间距 word-spacing: 20px; 单词间距 text-transform: capitalize/uppercase/lowercase ; 文本转换,用于所有字句变成大写或小写字母,或每个单词的首字母大写 */
3.3 背景属性
属性操作
background-color
background-image 背景图片
background-repeat 平铺满 no-repeat不平铺满
background-position 背景定位 位置
div{
width: 1600px;
height: 1600px;
/*background-color: #99cc99;*/
/*background-image: url("top1.jpg");*/
/*background-repeat:no-repeat;*/
/*background-position: center center; 背景图片进行位置调整*/
background: url("top1.jpg") no-repeat center center; #可以写成一行
background: url("top1.jpg") no-repeat 0 0; # 把照片设置在左上角 } </style> </head>
<body>
<div> </div>
</body>
</html>
3.4 边框属性
属性介绍
border-width
border-color
border-style(required)
div{
width: 200px;
height: 200px;
background-color:aquamarine;
border: 30px ; #厚度
border: dashed;
}
div{text-align: center}
<div>
DIV
</div>
简写:border:30px aquamarine; dashed
边框-单独设置各边
border-top: double;
border-right: hidden;
border-bottom: groove;
border-left: medium;
3.5 列表属性
list-style-type 设置列表项标志的类型
list-style:None 取消样式
3.6 display属性
none 隐藏某标签
block 内联标签设置为块级标签
inline 块级标签设置为内联标签
inline-block 可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决
内联不能设置长/宽
display none
隐藏hello属性
<style>
div{
display: none;
}
</style> <div>
hello
</div>
div{
/*display: none;*/
width: 200px;
height: 200px;
background-color: antiquewhite;
}
.son{
width: 100px;
height: 100px;
background-color: seashell; }
.father:hover .son{
display: none;
} #father hover住 让son点击消失
</style>
</head>
<body> <div class="father">
hello
<div class="son"></div>
</div>
注意与visibility:hidden的区别:
visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
block 内联标签设置为块级标签
span{
width: 200px;
height: 200px;
background-color: #2459a2;
display: block;
}
<span>hello</span>