浅谈css之属性及剩余的选择符

风,从水中掠过,留下粼粼波纹;阳光,从云中穿过,留下丝丝温暖;岁月,从树林中走过,留下圈圈年轮。

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

属性选择符

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

XML/HTML Code复制内容到剪贴板
  1. input[type]{color:#red;}<inputtype="radio">

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

XML/HTML Code复制内容到剪贴板
  1. input[type="radio"]{color:#red;}
  2. <inputtype="radio">

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

XML/HTML Code复制内容到剪贴板
  1. a[class~="ht"]{font-size:16px;}
  2. <arel="nofollow noopener noreferrer" href="www.haodaima.com"class="htsss"></a>

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

XML/HTML Code复制内容到剪贴板
  1. a[href^="www"]{font-size:16px;}<arel="nofollow noopener noreferrer" href="www.haodaima.com"></a>

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

XML/HTML Code复制内容到剪贴板
  1. input[type$="o"]{color:red;}
  2. <inputtype="radio">

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

XML/HTML Code复制内容到剪贴板
  1. input[type*="ad"]{color:red;}
  2. <inputtype="radio">

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

XML/HTML Code复制内容到剪贴板
  1. input[class|="te"]{color:red;}
  2. <inputtype="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 设置对象被选择时的颜色。

XML/HTML Code复制内容到剪贴板
  1. <pclass="t1">测试css的伪对象选择符,天气晴朗,阳光明媚!</p>
  2. p.t1{width:100px;border:1pxsolidblack;}/*CSS3的语法改成::,原本是:*/
  3. p.t1::first-letter{font-size:20px;font-weight:bold;}/*第一个字符*/
  4. p.t1::first-line{color:blue;}/*第一行*/
  5. css:.t2::before{content:'123';}
  6. .t2::after{content:'123';}

兼容:

CSS Code复制内容到剪贴板
  1. html:<inputtype="search"placeholder="测试">
  2. css:
  3. input::-webkit-input-placeholder{
  4. color:green;}
  5. input:-ms-input-placeholder{//IE10+
  6. color:green;}
  7. input:-moz-placeholder{//Firefox4-18
  8. color:green;}
  9. input::-moz-placeholder{//Firefox19+
  10. color:green;}
CSS Code复制内容到剪贴板
  1. <h3>请使用鼠标选取我</h3>
  2. <p>请使用鼠标选取我</p>
  3. p::-moz-selection{background-color:#E13300;color:white;}
  4. p::selection{background-color:#E13300;color:white;}

css的样式

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

XML/HTML Code复制内容到剪贴板
  1. p{font-family:‘宋体','黑体','Arial’}

font-size 设置文字的尺寸

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

XML/HTML Code复制内容到剪贴板
  1. p{font-size:14px;}

font-weight 控制字体粗细

CSS Code复制内容到剪贴板
  1. p{font-weight:bold;}

font-style 控制字体是否倾斜

XML/HTML Code复制内容到剪贴板
  1. p{font-style:normal;}
  2. p{font-style:italic;}
  3. p{font-style:oblique;}

font(字体样式缩写)

XML/HTML Code复制内容到剪贴板
  1. font:font-style||font-variant||font-weight||font-size||/line-height||font-family
  2. p{font:italicbold14px/22px宋体}

color 控制文本的字体颜色

XML/HTML Code复制内容到剪贴板
  1. p{
  2. color:#FF0000;
  3. }

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

XML/HTML Code复制内容到剪贴板
  1. text-decoration:none||underline||blink||overline||line-through
  2. p{text-decoration:overline;}
  3. p{text-decoration:underline;}
  4. p{text-decoration:line-through;}

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

XML/HTML Code复制内容到剪贴板
  1. text-shadow:h-shadowv-shadowblurcolor;
  2. h-shadow必需。水平阴影的位置。允许负值。
  3. v-shadow必需。垂直阴影的位置。允许负值。
  4. blur可选。模糊的距离。
  5. color可选。阴影的颜色。
  6. h1{
  7. text-shadow:2px2px#ff0000;
  8. }

width 宽度

XML/HTML Code复制内容到剪贴板
  1. width:auto|length
  2. p{width:300px;}
  3. div{width:50%;}

height 高度

CSS Code复制内容到剪贴板
  1. height:auto|length
  2. img{height:200px;}
  3. div{height:100px;}

margin 外边距

CSS Code复制内容到剪贴板
  1. margin:auto|length
  2. margin-top设置上边的外边距
  3. margin-bottom设置下边的外边距
  4. margin-left设置左边的外边距
  5. margin-right设置右边的外边距
  6. div{width:300px;height:100px;margin:10px;}
  7. div{width:300px;height:100px;margin:0auto;}
  8. 缩写型式:
  9. margin:上边距右边距下边距左边距
  10. margin:上下边距左右边距
  11. margin:上边距左右边距下边距

padding 内边距

CSS Code复制内容到剪贴板
  1. padding:length
  2. div{width:300px;height:100px;padding:10px;}
  3. padding-top设置上边的内边距
  4. padding-bottom设置下边的内边距
  5. padding-left设置左边的内边距
  6. padding-right设置右边的内边距
  7. 缩写型式:
  8. padding:上边距右边距下边距左边距
  9. padding:上下边距左右边距
  10. 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就是画与画之间的距离。

以上这篇浅谈css之属性及剩余的选择符就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例