css之属性及剩余的选择符

时间:2023-03-08 17:27:15
css之属性及剩余的选择符

今天的课程加速了,比平时快了些,但觉得很不错。nice~

属性选择符

E[att]       选择具有att属性的E元素。

input[type]{color: #red;}
<input type="radio">

E[att="val"]      选择具有att属性且属性值等于val的E元素。

input[type="radio"]{color: #red;}

<input type="radio">

E[att~="val"]     选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。

a[class~="ht"]{font-size: 16px;}
<a href="www.baidu.com" class="ht sss"></a>

E[att^="val"]    选择具有att属性且属性值为以val开头的字符串的E元素。

a[href^="www"]{font-size: 16px;}

<a href="www.baidu.com"></a>

E[att$="val"]     选择具有att属性且属性值为以val结尾的字符串的E元素。

input[type$="o"]{color: red;}

<input type="radio">

E[att*="val"]      选择具有att属性且属性值为包含val的字符串的E元素。

input[type*="ad"]{color: red;}

<input type="radio">

E[att|="val"]      选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

input[class|="te"]{color: red;}

<input type="radio" class="te-ss">

E:first-letter/E::first-letter       设置对象内的第一个字符的样式。

就是匹配的到的元素的第一个字。

E:first-line/E::first-line       设置对象内的第一行的样式。

E:before/E::before          设置在对象前(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用

E:after/E::after              设置在对象后(依据对象树的逻辑结构)发生的内容。用来和content属性一起使用

E::placeholder               设置对象文字占位符的样式。

E::selection                 设置对象被选择时的颜色。

<p class="t1">测试css的伪对象选择符,天气晴朗,阳光明媚!</p>

p.t1{width:100px;border:1px solid black;} /* CSS3的语法改成 ::,原本是: */

p.t1::first-letter {font-size:20px;font-weight:bold;}/*第一个字符*/

p.t1::first-line {color:blue;}/* 第一行 */


css: .t2::before{content:'123';}

.t2::after{content:'123';}

兼容:

html:<input type="search" placeholder="测试">
css:
input::-webkit-input-placeholder {
color: green;} input:-ms-input-placeholder { // IE10+
color: green;} input:-moz-placeholder { // Firefox4-18
color: green;} input::-moz-placeholder { // Firefox19+
color: green;}
 <h3>请使用鼠标选取我</h3>
<p>请使用鼠标选取我</p> p::-moz-selection{ background-color:#E13300; color: white;}
p::selection{ background-color: #E13300; color: white; }

css的样式

font-family    设置文字名称,可以使用多个名称,或者使用逗号 分隔,浏览器则按照先后顺序依次使用可用字体。

p { font-family:‘宋体','黑体', 'Arial’ }

font-size       设置文字的尺寸

注:如果用百分比作为单位,则是基于父元素字体的大小

p { font-size:14px;}    

font-weight       控制字体粗细

p { font-weight:bold;}

font-style       控制字体是否倾斜

p { font-style: normal; }
p { font-style: italic; }
p { font-style: oblique; }

font(字体样式缩写)

font : font-style || font-variant || font-weight || font-size || / line-height || font-family

p { font:italic bold 14px/22px 宋体}

color     控制文本的字体颜色

p{
color:#FF0000;
}

text-decoration(文本装饰线条)      控制文本装饰线条

text-decoration : none || underline || blink || overline || line-through 

p { text-decoration:overline;}

p { text-decoration:underline;}

p { text-decoration:line-through;}

text-shadow(文字阴影)     控制文字的阴影部分。

text-shadow: h-shadow v-shadow blur color;

h-shadow         必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊的距离。
color 可选。阴影的颜色。 h1{
text-shadow: 2px 2px #ff0000;
}

width   宽度

width : auto | length     

p { width:300px;}

div { width:50%;}

height    高度

height : auto | length 

img { height:200px;}

div { height:100px;}

margin     外边距

margin : auto | length 

margin-top         设置上边的外边距
margin-bottom 设置下边的外边距
margin-left 设置左边的外边距
margin-right 设置右边的外边距 div { width:300px; height:100px; margin:10px;} div { width:300px; height:100px; margin:0 auto;} 缩写型式: margin: 上边距 右边距 下边距 左边距 margin: 上下边距 左右边距 margin: 上边距 左右边距 下边距

padding      内边距

padding : length

div { width:300px; height:100px; padding:10px;}

padding-top         设置上边的内边距
padding-bottom 设置下边的内边距
padding-left 设置左边的内边距
padding-right 设置右边的内边距 缩写型式: padding: 上边距 右边距 下边距 左边距 padding : 上下边距 左右边距 padding : 上边距 左右边距 下边距

补充知识:

padding内边距

当一个盒子设置了背景图像后,默认情况下背景图像覆盖的范围是padding和内容组成的范

围,并以padding的左上角为基准点平铺背景图像。

border边框

border边框里在IE并不显示背景图像的内容,在Firefox则显示背景图像的内容。

因为边框是介于内边距和外边距之间的,当边框设置为虚线时,在IE中,虚线空白的地方露

出来的是padding部分的背景,而在Firefox中,虚线空白的地方露出来的是margin部分的背景。

margin外边距

body是个特殊的盒子,它的背景色会延伸到margin的部分,而其他盒子的背景色只会覆盖“padding+内容

部分”(IE浏览器中)或者“border+padding+内容”部分(Firefox浏览器中)

margin用于控制块与块之间的距离。

倘若将盒子模型比作展览馆里展出的一幅幅画,那么content就是画面本身,padding就是画面与画框之间的留白,

border就是画框,而margin就是画与画之间的距离。