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
CSS基础篇之选择符2的更多相关文章
- CSS基础篇之选择符
关系选择符 E F 包含选择符(Descendant combinator) CSS1 选择所有被E元素包含的F元素. <html> <head> <meta chars ...
- CSS基础篇之选择符3
border(边框) 如何用CSS调出边框 我们给p标签加一个边框试一下 p{ border:1px solid #ccc:/*这是缩写*/ } 第一个值是为边框的宽度 第二个值是为边框线样式为直线 ...
- CSS全览_选择符+特指+单位+字体
CSS全览_选择符+特指+单位+字体 目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体 作者: https://www.cnb ...
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- 好程序员web前端分享CSS基础篇
学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML.CSS注释 ...
- 前端面试题——html与css基础篇
整理一波html和css的面试题,侧重基础,希望明天面试能用到~(╥╯^╰╥) 一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.C ...
- html/css基础篇——iframe和frame的区别【转】
转自共享圈的使用iframe的优缺点,为什么少用iframe以及iframe和frame的区别.其中本人不认同的地方有做小修改 注:HTML5不再支持使用frame,iframe只有src 属性 一. ...
- html/css基础篇——html代码编写过程中的几个警惕点
本文想说的警惕点与浏览器兼容无关,主要是几个本人在项目中遇到的几个小问题的总结,问题虽小,但是却有时很困扰人,在此记录一下,如果后期有此类问题会持续添加到这里. 1.内联标签之间的空格 正常情况下书写 ...
- html/css基础篇——DOM中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
随机推荐
- C++开始前篇，深入编译链接（补充2）
在开始链接之前,我们先了解几个概念: 一>符号的概念. 我们知道,链接的最重要的是"对符号的重定位",而且上面提到了符号表,那什么是符号呢,在链接中,我们将函数和变量统称为符 ...
- 关于for循环------swift3.0
在程序开发当中,for循环使用的频率无疑是最高的.常用的swift循环是递增式遍历.当然各种循环,swift都能办到.但其大多采用关键字形式实现,大部分开发者更喜欢直接使用C式循环代码.在swift3 ...
- RedHat Enterprise Linux 6.4 使用 Centos 6 的yum（转）
概述 redhat的yum源需注册付费,费时费力,整理RedHat yum 安装CentOS的方法. 安装系统文件 系统:RedHat Enterprise Linux 6.4-x86_64 md5: ...
- Java并发集合的实现原理
本文简要介绍Java并发编程方面常用的类和集合,并介绍下其实现原理. AtomicInteger 可以用原子方式更新int值.类 AtomicBoolean.AtomicInteger.AtomicL ...
- 19.Java 注解
19.Java注解 1.Java内置注解----注解代码 @Deprecated //不推荐使用的过时方法 @Deprecated ...
- MongoDB 分页查询的方法及性能
最近有点忙,本来有好多东西可以总结,Redis系列其实还应该有四.五.六...不过<Redis in Action>还没读完,等读完再来总结,不然太水,对不起读者. 自从上次Redis之后 ...
- 表单验证<AngularJs>
常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: <input type="text" requir ...
- 18.tty驱动程序框架
tty驱动程序框架 一.TTY概念解析 在Linux系统中,终端是一类字符型设备,它包括多种类型,通常使用tty来简称各种类型的终端设备. 1.1串口终端(/dev/ttyS*) 串口终端是使用计算机 ...
- Swift String类型常规操作
去除string 首尾的空格var str = " Hello the world "let whitespace = NSCharacterSet.whitespaceAnd ...
- MSP430FR4133/4131/4132单片机破解芯片解密多少钱？
德州仪器MSP430FR4133/4131/4132单片机破解芯片解密多少钱? MSP430FR4133.MSP430FR4131.MSP430FR4132 ####[微信:icpojie]#### ...