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>重置浏览器窗口大小查看 &quot;justify&quot; 是如何工作的。</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> 
上一篇:总结敏捷开发之Scrum


下一篇:63. Unique Paths II(有障碍的路径 动态规划)