CSS的部分基础属性及CSS的部分选择器

来源:转载

CSS基础属性

2.3 背景相关属性

body{ background-color: #9f60f5; background-image: url("../img/1.jpg"); background-repeat: no-repeat; background-position: bottom;}

background-color:背景色
background-image:设定背景图片,需要设置图片的url地址
background-repeat:图片的复制选项
(1)repeat:在水平和垂直两个方向上进行复制
(2)no-repeat:不复制
(3)repeat-x:在水平方向上复制
(4)repeat-y:在垂直方向上复制
background-position:背景的位置
也可以将这一组属性值封装到一个属性background中,表达更加简洁,书写顺序是:background-color background-image background-repeat background-position:

background: green url("../img/1.jpg") no-repeat right;

尺寸相关属性

div{ width: 200px; height: 200px; background-color: rgba(155, 0, 245, 0.99);}

height:高度,
width:宽度
max-width:最大宽度
max-height:最大高度
min-width:最小宽度
min-height:最小高度

显示相关属性

隐藏元素的方法:
(1)visibility:hidden,仅仅隐藏内容,该元素所占位置依然存在;
(2)display:none,不仅隐藏内容,且不占位置

div{ height: 300px; /*visibility: hidden;*/ display: none;}

而且display属性可以设置元素的显示模式,可以将块级元素和内联元素之间的转换

li{ display: inline-block; width: 100px; background-color: rgba(0, 129, 245, 0.99);} span{ display: block;}

inline:将块级元素以内联元素形式显示,此时width和height属性无效,其空间取决于元素的内容。
inline-block:将块级元素以内联元素形式显示,同时兼具块级元素的某些特征,比如可以使用width和height设置所占位置的大小
block:将内联元素以块级元素形式来显示,即display:block。

盒子模型

盒子模型有三个主要属性:
margin:外边距,与margin关联的有margin-top、margin-right、margin-bottom、margin-left
margin的使用方式
(1)margin:30px;表示上下左右外边距都为30px;
(2)margin-left:30px;单独设置上下左右外边距
(3)margin:10px、20px、30px、40px:分别设置上右下左四个边距为10px 20px 30px 40px
padding:内边距,与padding关联的有padding-top、padding-right、padding-bottom、padding-left
padding的使用方式和和margin类似
border:边框
border有两种写法:
(1)border: 1px dashed #ffa7ac;
(2)border-width:边框宽度
(3)border-style:边框线条类型
(4)border-color:边框的颜色
outline:边框的轮廓线,用法同border

定位

定位方式有:static、fixed、relative、absolute
static:静态定位(默认)
无定位,元素正常出现了流中,不受left、right、top、bottom影响

div{ width: 200px; height: 200px; background-color: red; position: static;}

fixed:固定定位

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #div1{ width: 200px; height: 200px; background-color: #dcb9ff; } #div2{ width: 200px; height: 200px; background-color: #ff5f74; } </style></head><body> <div id="div1"></div> <div id="div2"></div></body>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #div1{ width: 200px; height: 200px; background-color: #dcb9ff; position: fixed; left: 30px; top: 30px; } #div2{ width: 200px; height: 200px; background-color: #ff5f74; } </style></head><body> <div id="div1"></div> <div id="div2"></div></body>

fix定位会将元素从流中“摘”出来单独进行定位,定位取决于left、top。
重新定位之后可能会出现重叠,通过z-index可以调整顺序,但是静态定位z-index无效
relative:相对定位

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #div1{ width: 200px; height: 200px; background-color: #dcb9ff; } #div2{ width: 200px; height: 200px; background-color: #ff5f74; position: relative; top: 20px; left: 30px; } #div3{ width: 100px; height: 100px; background-color: #6eff62; position: relative; z-index: 2; } </style></head><body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div></body>

相对定位是从原有位置进行位移,但并不影响后续位置。
absolute:绝对定位

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #div1{ width: 200px; height: 200px; background-color: #dcb9ff; } #div2{ width: 200px; height: 200px; background-color: #ff5f74; position: absolute; top: 20px; left: 30px; } #div3{ width: 100px; height: 100px; background-color: #6eff62; } </style></head><body> <div id="div1"> <div id="div2"></div> </div> <div id="div3"></div></body>

绝对定位的元素将从流中被“摘”出来依靠left、top属性进行定位。
与fixed类似,但是参照物不同,fixe参照元素(html),absolute参照父容器

选择器

所谓选择器,指的是选择施加样式目标的方式。

元素选择器

用标签名作为选择器,选中所有相应的元素

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> div{ color: red; } p{ color: #ffa7ac; } </style></head><body> <div>元素选择器</div> <p>元素选择器</p></body>

id选择器

顾名思义,是根据id来选择元素,其样式定义形式为
#idname{
}

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> #div1{ width: 200px; height: 200px; background-color: red; } #div2{ width: 200px; height: 200px; background-color: #fffd25; } </style></head><body> <div id="div1"></div> <div id="div2"></div></body>

类选择器

根据class属性来选择元素,其样式定义形式为:
.className{
}

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; } .even{ background-color: red; } .odd{ background-color: #fffd25; } </style></head><body> <div class="odd"></div> <div class="even"></div> <div class="odd"></div></body>

.odd{……}定义的样式会施加到所有class=“odd”的元素上

属性选择器

根据某个属性的特性(比如有无、值等)来选择
(1)根据有无属性来选择

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> [title]{ width: 100px; height: 100px; background-color: red; border: 1px solid ; } </style></head><body> <div title="div1">1</div> <div title="div2">2</div> <div >3</div> <div title="a div">4</div> <div title="div a">5</div></body>

所有具有title属性的元素都应用了红色背景色的样式。
(2)根据属性的值来选择

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> [title='div2']{ width: 100px; height: 100px; background-color: red; border: 1px solid ; } </style></head><body> <div title="div1">1</div> <div title="div2">2</div> <div >3</div> <div title="a div">4</div> <div title="div a">5</div></body>

只有第二个div应用了红色背景的样式,因为只有第二个div的title属性等于div2
~=:属性值包含指定完整单词的元素

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> [title~='div']{ width: 100px; height: 100px; background-color: red; border: 1px solid ; } </style></head><body> <div title="div1">1</div> <div title="div2">2</div> <div >3</div> <div title="a div">4</div> <div title="div a">5</div></body>

title^=‘div’:选中title属性以div开头的所有元素

title$=‘div’:选中title属性以div结尾的所有元素

title*=‘div’:选中title属性包含div的所有元素

分享给朋友:
您可能感兴趣的文章:
随机阅读: