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>