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中关于脱离文档流的几种情况分析
所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. ...
随机推荐
- Android开发之MVP模式的使用
前几天发现,在Android项目代码里有一个Activity类行数居然有1000多行,而600行左右都是逻辑控制,真正和页面控件处理相关的代码不多,虽然可以用#region <>...#e ...
- vs使用
1.控制dll是否生成到本地,如图,右击dll,选择属性,设置复制到本地为true即可
- 初识node.js
Node.js不是一种语言:不是框架:也不是工具.它是用于运行基于JavaScript应用程序的运行时环境.
- SQL参数化查询自动生成SqlParameter列表
string sql = @"INSERT INTO stu VALUES (@id,@name) "; 参数化查询是经常用到的,它可以有效防止SQL注入.但是需要手动去匹配参数@ ...
- Quartz定时调度框架
Quartz定时调度框架CronTrigger时间配置格式说明 CronTrigger时间格式配置说明 CronTrigger配置格式: 格式: [秒] [分] [小时] [日] [月] [周] [年 ...
- RadioGroup 和 ViewPager 绑定 实现切换
package com.jereh.helloworld.activity.day12; import android.app.Activity; import android.os.Bundle; ...
- Linux学习笔记（12）-进程间通信|匿名管道
Linux的进程间通信有几种方式,包括,管道,信号,信号灯,共享内存,消息队列和套接字等-- 现在一个个的开始学习! ----------------------------------------- ...
- poj3311 TSP经典状压dp(Traveling Saleman Problem)
题目链接:http://poj.org/problem?id=3311 题意:一个人到一些地方送披萨,要求找到一条路径能够遍历每一个城市后返回出发点,并且路径距离最短.最后输出最短距离即可.注意:每一 ...
- 安卓手持智能POS端上能扫描开单的软件-店面销售开单系统
安卓移动POS终端上能扫描开单的软件: 一.登录验证,以业务员.密码登录: 二.订单列表,显示相关信息,包括日期.单据号.客户名.金额.单据状态.有新增订单及按特定条件查询订单的功能(日期.客户等). ...
- LAMP_源码安装全教程
第一步:准备安装软件 httpd-2.4.7.tar.gz, apr-1.4.6.tar.gz, apr-util-1.4.1.tar.gz,mysql-5.5.tar.gz,php-5.4.tar. ...