CSS属性操作
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>
