CSS基础篇之选择符2

属性选择符:


选择符


版本


描述


E[att]


CSS2


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


E[att="val"]


CSS2


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


E[att~="val"]


CSS2


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


E[att^="val"]


CSS3


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


E[att$="val"]


CSS3


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


E[att*="val"]


CSS3


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


E[att|="val"]


CSS2


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

各个例子:

E[att]

<style>
img[alt] {
    margin: 10px;
}
</style>

<img src="图片url" alt="" />
<img src="图片url" />

这里我用了所有img标签里有alt属性就会字体整个10个像素大小,这里只有第一个img元素里面有alt属性有alt属性的元素字体会变成10个像素大小。

E[att="val"]

<style>
input[type="text"] {
    border: 2px solid #000;
}
</style>

<input type="text" />
<input type="submit" />

这里代表所有input里面的有type=“text”属性的边框为2个像素 黑色实线。

E[att~="val"]

<style>
div[class~="a"] {
    border: 2px solid #000;
}
</style>

<div class="a">1</div>
<div class="b">2</div>
<div class="a b">3</div>

div标签里用空格间隔的class=“a”(其中一个属性值有a)都会选择到。

E[att^="val"]

<style>
div[class^="a"] {
    border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

div标签里面class属性值开头第一个字符串为a的都会选择到。

E[att$="val"]

<style>
div[class$="c"] {
    border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

div标签里面class属性值最后一个字符串为(a)的都会选择到。

E[att|="val"]

<style>
div[class*="b"] {
    border: 2px solid #000;
}
</style>

<div class="abc">1</div>
<div class="acb">2</div>
<div class="bac">3</div>

div标签里面class属性值里面有相同的字符串(b)就会选择到。

E[att*="val"]

<style>
div[class|="a"] {
    border: 2px solid #000;
}
</style>

<div class="a-test">1</div>
<div class="b-test">2</div>
<div class="c-test">3</div>

div标签里面class属性值里面有这个符号 - 的,例子里是a-的属性值会改变。

伪对象选择符:


E:first-letter/E::first-letter


CSS1/3


设置对象内的第一个字符的样式。


E:first-line/E::first-line


CSS1/3


设置对象内的第一行的样式。


E:before/E::before


CSS2/3


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


E:after/E::after


CSS2/3


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


E::placeholder


CSS3


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


E::selection


CSS3


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

E:first-letter/E::first-letter

此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先将其设置为块级对象。该伪类常被用来配合font-size属性和float属性制作首字下沉效果。

<style>
h1{font-size:16px;}
p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}
p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
</style>
</head>
<body>
<h1>杂志常用的首字下沉效果</h1>
<p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>
</body>

E:first-line/E::first-line

效果:选择符与包含规则的花括号之间不能紧挨着,需留有空格或换行。

<style>
h1{font-size:16px;}
p{width:200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}
p:first-line {color:#090;}
p::first-line {color:#090;}
</style>
</head>
<body>
<h1>第一行文字的颜色与其它不同</h1>
<p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>
</body>

E::placeholder

用于文本框的提示字体。

<style>
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;
}
</style>
</head>
<body>

  <input id="test" placeholder="请输入密码!">

</body>
    

E::selection

设置对象被选择时的样式

需要注意的是,::selection只能定义被选择时的background-color,color及text-shaow

<style>
p::-moz-selection{background:#000;color:#f00;}
p::selection{background:#000;color:#f00;}
</style>
</head>
<body>
<h1>选中下面的文字,看看它的颜色</h1>
<p>你选中这段文字后,看看它们的文本颜色和背景色,就能明白::selection的作用。</p>

字体样式

font-family(字体的样式)

p { font-family:‘宋体‘,‘黑体‘, ‘微软雅黑’ }

输入多个字体时用,号间隔。输入的字体样式名称加  ‘ ’ 号。多字体样式用于查看浏览器字体种类如果你没有其中一个还能用其他几个。

font-size(字体大小)

p { font-size:1px;}    

改变你所要的标签元素的字体大小。

font-weight(字体的加粗)

p { font-weight:bold;}

虽然可以用数值调,但不建议用因为区别不大。最好用bold。

font-style(字体倾斜)

p { font-style: normal; } 

指定文本字体样式为正常的字体

p { font-style: italic; } 

指定文本字体样式为斜体。对于没有设计斜体的特殊字体。(先天)

p { font-style: oblique; } 

指定文本字体样式为倾斜的字体。人为的使文字倾斜,而不是去选取字体中的斜体字。(后天)

font(字体样式缩写)

这是没有缩写

p{
    font-style:italic;
    font-weight:bold;
    font-size:14px;
    line-height:22px;
    font-family:宋体;
}

缩写后

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

其实属性写发顺序是是否倾斜-字体的加粗-字体大小-字体高度-字体样式这个顺序。注意大小和高度中间要用 / 号分开。

color(字体颜色)

颜色有三种值

1.颜色英文单词 blue、yellow。在这个取色比较少

p{
    color:#blue;
}

2.十六进制表示法用 # 开头的PS里面颜色也有这个

p{
    color:#FF0000;
}

3.RGB  PS里面也有的

p{color:rgb(0,0,0);}

数值0~255

4.rpga 后面的A表示透明度50%

p{
    color:(0,0,0,.5);
}

前面三个数值从0~255最后一个是透明多少。

text-decorcation(文本装饰线条)

p { text-decoration:overline;}
overline:指定文字的装饰是上划线
p { text-decoration:underline;}
underline:指定文字的装饰是下划线
p { text-decoration:line-through;}
line-through:指定文字的装饰是删除线

text-shaow属性和值h-shaow   必写。水平阴影的位置。可以负值。v-shaow   必写。垂直阴影的位置。可以负值。blur      可选。阴影模糊的距离。color   可选。阴影的颜色。

完整
h1{
            h-shadow:-3px;
            v-shadow:-4px;
            blur:5px;
            color:blue;
}        

缩写
h1{
    text-shadow: 2px 2px #ff0000;
}
缩写写法顺序h-shadow、v-shadow、blur、color
时间: 2024-10-14 06:54:46

CSS基础篇之选择符2的相关文章

CSS基础篇之选择符3

border(边框) 如何用CSS调出边框 我们给p标签加一个边框试一下 p{ border:1px solid #ccc:/*这是缩写*/ } 第一个值是为边框的宽度 第二个值是为边框线样式为直线 第三个值是为边框的颜色 border-width(边框的宽度) 如果不调宽度的话默认边框是从左边到最右边.设置之后可以调节宽度. border-top-width::上 border-bottom-width::下 border-left-width::左 border-right-width::右

CSS基础篇选择符

关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> P b{ font-size: 60px; font-family: "微软雅黑"; color:

CSS基础篇之了解CSS和它的基本属性

CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同的浏览器有不同的CSS前缀 如果你用的是charome和safari,前缀就是-webkit 如果你用的是firefox,前缀是-moz 如果你用的是IE,前缀是-ms 如果你用的是opera,前缀是-o CSS能做什么? CSS简化了以前要使用很多图片和脚本实现的效果,只需几行代码就能搞定.方便了

css属性和部分选择符

1.1像素细边框的表格 效果: <style type="text/css"> #test{ border-collapse: collapse;border:1px solid #ddd; } /*#test th,#test td{ border: 10px solid #ddd; }*/ </style> 2.css奇数偶数样式 效果: <style type="text/css"> /*奇数*/ .ul2 li:nth-c

新旅程CSS 基础篇分享一

在上一篇HTML完结篇中,已经给大家对CSS做了一个了解.本片博主将不再赘述,直接进入知识点,归纳总结: 一.CSS 三种书写的方式 嵌入式.外链式.行内式 嵌入式就是将CSS写入在<style></style> 外链式将外面的CSS文件通过HTML中的标记链接过来 <link  rel="stylesheet"  type="text/css"  href="外部CSS文件的地址" /> 行内式:就是将CSS

css基础篇(三)——布局(上)float和position

1.定位(position) position的值有:relative/absolute/fixed/static/inherit; static:为position属性的默认值,static元素会遵循正常的文档流,且会忽略top,bottom,left,right等属性; inherit:如同其他css的inherit值,即继承父元素的position值(ie不支持) 下面重点介绍前三个值: 1.1 相对定位(relative) 场景描述(如上图):第二个div的位置相对自己向下向右移动30p

css基础篇(一)——浏览器加载和渲染网页

1.介绍 虽然这篇是css笔记,但是做为web开发,天天和浏览器打交道,有必要先理理我目前了解的浏览器加载和渲染页面的过程. 2.页面加载和渲染流程 如图:(该篇重点是css,所以该图重点说明css渲染) 1.重建DOM树:渲染引擎开始解析html文档,转换树中的标签到DOM节点 2.构建渲染树:解析css,根据css选择器找到节点的样式,创建另外一个树———渲染树 3.布局渲染树:从根节点开始,计算出每一个元素的大小和位置 4.绘制渲染树:遍历渲染树将每个节点都绘制出来 整个流程简易描述:用户

css基础 属性选择器 选择带有title属性的a标签

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu

前端之CSS基础篇

CSS介绍 什么是CSS? CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 每个CSS样式由两个组成部分:选择器和声明.声明又包括属性和属性值.每个声明之后用分号结束. CSS注释 /*这是注释*/ 注释是代码之母.--摘自哪吒语录 CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式.不推荐大规模使用. 1 <p style=&qu