Htmlcss学习笔记2——选择器与常用样式
- color
- text-align
- direction
- line-height
- text-decorate
- text-indent
- text-shadow
- text-transform
- white-space
- word-spacing
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-size
- background-origin
CSS引入类型
行内样式
结构的内部，即写在标签内的样式；写在标签的开始部分内部，style属性当中。
<input style="color:#ccc">
内联样式
在HTML页面内部，存放于head标记当中，样式写在style标记内。
<style>选择器 {属性名：属性值；属性名：属性值；......}</style>
外部样式表
外联式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过标记将外部样式表文件链接到HTML文档中
<link type="text/css" rel="stylesheet" href="css/main.css" />
- href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
- type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CS样式表。
- rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
CSS选择器
基本选择器
类选择器
| 选择器 | 示例 | 说明 | css |
|---|---|---|---|
| .class | .intro{} | 选择所有class="intro"的元素 | 1 |
ID选择器
| 选择器 | 示例 | 说明 | css |
|---|---|---|---|
| #id | #idname{} | 选择所有id="idname"的元素 | 1 |
通配符选择器
| 选择器 | 示例 | 说明 | css |
|---|---|---|---|
| * | *{} | 选择所有元素 | 2 |
标签选择器
| 选择器 | 示例 | 说明 | css |
|---|---|---|---|
| element | p{} | 选择所有
元素 |
1 |
复合选择器
后代、子代、兄弟选择器
| 选择器 | 示例 | 说明 | css |
|---|---|---|---|
| 后代选择器 | div p{} | 选择
元素内的所有
元素 |
1 |
| 子元素选择器 | div>p{} | 选择所有父级是
元素的
元素 |
2 |
| 相邻兄弟选择器 | div+p{} | 选择所有紧接着
元素之后的
元素 |
2 |
交集、并集选择器
| 选择器 | 示例 | 说明 | css |
|---|---|---|---|
| element.classname | div.red{} | 选择
标签并且类名为red的
元素 |
1 |
| element#idname | div#blue{} | 选择
标签并且id名为blue的
元素 |
1 |
| element,element | div,p{} | 选择所有
元素和
元素 |
1 |
其他选择器
| 选择器 | 示例 | 说明 | css |
|---|---|---|---|
| element1-element2 | p~ul | 选择p元素之后的每一个ul元素 | 3 |
| element> element:first-child | p > i:first-child{} | 匹配所有
元素中的第一个 元素 |
3 |
伪类选择器
链接伪类选择器
| 选择器 | 示例 | 说明 | css |
|---|---|---|---|
| :link | a:link{} | 选择所有未访问的链接 | 1 |
| :visited | a:visited{} | 选择所有已访问的链接 | 1 |
| :hover | a:hover{} | 选择所有鼠标划过的链接 | 1 |
| :active | a:active{} | 选择所有已选中的链接 | 1 |
位置伪类选择器
| 选择器 | 示例 | 说明 | css |
|---|---|---|---|
| :first-child | p:first-child{} | 匹配第一个
元素 |
3 |
| :last-child | p:last-child | 选择每个p元素是其父级的最后一个子级。 | 3 |
| :nth-child(n) | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 | 3 |
| :first-child element | p:first-child i{} | 匹配所有作为第一个子元素的
元素中的所有 元素 |
3 |
伪元素选择器
| 选择器 | 示例 | 说明 | css |
|---|---|---|---|
| E::first-letter | p::first-letter | 选择每一个
元素的第一个字母 |
3 |
| E::first-line | p::first-line | 选择每一个
元素的第一行 |
3 |
| E::selection | p::selection | 匹配p中被用户选中或处于高亮状态的部分 | 3 |
| E::before | div::before | 在div内的前面，必须有content属性，它是一个盒子 | 3 |
| E::after | div::after | 在div内的后面 | 3 |
[案例]：放图片上有边框效果
div{
width:300px
height:200pc
position:relative
overflow:hidden
}
div:hover::after{
content:""
position:absolute
width:100%
height:100%
top:0
left:0
border:20px solid rgba(255,255,255,0.5)
box-sizing:border-border
}
[案例]：鼠标在元素上面时加上小图标
div{
width:300px
height:200pc
position:relative
border:1px solid #ccc
font-family:"icomoom"
}
div::before{
content:"\ea51"
position:absolute;
right:10px;
top:5px
}
其他选择器
| 选择器 | 示例 | 说明 | css |
|---|---|---|---|
| :focus | input:focus | 选择具有焦点的输入元素 | 2 |
| :first-letter | p:first-letter | 选择每一个
元素的第一个字母 |
1 |
| :first-line | p:first-line | 选择每一个
元素的第一行 |
1 |
| :before | p:before | 在每个
元素之前插入内容 |
2 |
| :after | p:after | 在每个
元素之后插入内容 |
2 |
| :lang(language) | p:lang(it) | 选择一个lang属性的起始值="it"的所有
元素 |
2 |
| :first-of-type | p:first-of-type | 选择每个p元素是其父级的第一个p元素 | 3 |
| :last-of-type | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 | |
| :only-of-type | p:only-of-type | 选择每个p元素是其父级的唯一p元素 | 3 |
| :only-child | p:only-child | 选择每个p元素是其父级的唯一子元素 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 | 3 |
| :root | :root | 选择文档的根元素 | 3 |
| :empty | p:empty | 选择每个没有任何子级的p元素（包括文本节点） | 3 |
| :target | #news:target | 选择当前活动的#news元素（包含该锚名称的点击的URL） | 3 |
| :enabled | input:enabled | 选择每一个已启用的输入元素 | 3 |
| :disabled | input:disabled | 选择每一个禁用的输入元素 | 3 |
| :checked | input:checked | 选择每个选中的输入元素 | 3 |
| :not(selector) | :not(p) | 选择每个并非p元素的元素 | 3 |
| :out-of-range | :out-of-range | 匹配值在指定区间之外的input元素 | 3 |
| :in-range | :in-range | 匹配值在指定区间之内的input元素 | 3 |
| :read-write | :read-write | 用于匹配可读及可写的元素 | 3 |
| :read-only | :read-only | 用于匹配设置 "readonly"（只读） 属性的元素 | 3 |
| :optional | :optional | 用于匹配可选的输入元素 | 3 |
| :required | :required | 用于匹配设置了 "required" 属性的元素 | 3 |
| :valid | :valid | 用于匹配输入值为合法的元素 | 3 |
| :invalid | :invalid | 用于匹配输入值为非法的元素 | 3 |
属性选择器
| 选择器 | 示例 | 说明 | css |
|---|---|---|---|
| [attribute] | [target] | 选择所有带有target属性元素 | 2 |
| [attribute=value] | [target=-blank] | 选择所有使用target="-blank"的元素 | 2 |
| [attribute~=value] | [title~=flower] | 选择标题属性包含单词"flower"的所有元素 | 2 |
| [attribute^=value] | a[src^="https"] | 选选择每一个src属性的值以"https"开头的元素 | 3 |
| [attribute$=value] | a[src$=".pdf"] | 选择每一个src属性的值以".pdf"结尾的元素 | 3 |
| [attribute*=value] | a[src*="runoob"] | 选择每一个src属性的值包含子字符串"runoob"的元素 | 3 |
| [attribute|=language] | [lang|=en] | 选择 lang 属性以 en 为开头的所有元素 | 2 |
CSS字体样式
语法
font: "font-style font-variant font-weight font-size/line-height font-family"
//按顺序，其中font-size和font-family的值是必需的。
font-size
相对长度单位
1. em:相对于当前对象内的字体尺寸
2. px:像素
绝对长度单位
1. in:英寸
2. cm:厘米
3. mm:毫米
4. pt:点
5. xx-small、 x-small、 small、 medium
其他单位
1. %:设置为基于父元素的一个百分比值
2. inherit:规定应该从父元素继承字体尺寸
3. smaller:设置为比父元素更小的尺寸
4. larger:设置为比父元素更大的尺寸
font-family
可以设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体
p{font-family:"Times New Roman", Times, serif;}
用Unicode编码形式定义
p{font-family:"\5FAE\8F6F\96C5\9ED1";}
注意：如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。多个字体系列是用一个逗号分隔指明
font-style
font-style:normal // 正常显示文本
font-style:italic // 以斜体字显示的文字
font-style:oblique // 文字向一边倾斜
font-weight
font-weight:normal
font-weight:bold|bolder|lighter|number（400相当于normal，700相当于bold）
font-variant
font-variant:normal|small-caps //正常|小写字母
CSS文本样式
color
color:＃FF0000
color:rgb(255,0,0)
color:red
color:rgba(255,0,0,0.7)
color:hsl(120,100%,25%) //色相-饱和度-明度
color:hsla(240,100%,50%,0.05) //色相-饱和度-明度-阿尔法
text-align
text-align:center|right|left|justify //居中|居右|居左|两边对齐
direction
direction:ltr|rtl //从左到右|从右到左
line-height
line-height:3 //此数字会与当前的字体尺寸相乘来设置行间距
line-height:100px
line-height:200%;
居中用法：只要height=line-height
text-decorate
text-decorate:none|underline|overline|line-through //无装饰|顶线|下划线|中穿线
text-decorate:underline dotted red //红色虚线
text-indent
text-indent:50px //首行缩进
text-shadow
text-shadow: h-shadow v-shadow blur color;
- h-shadow 必需 水平阴影的位置 允许负值。
- v-shadow 必需 垂直阴影的位置 允许负值
- blur 可选 模糊的距离
- color 可选 阴影的颜色
text-transform
text-transform:capitalize|uppercase|capitalize //每个单词以大写字母开头|全大写|全小写
white-space
- pre 空白会被浏览器保留。其行为方式类似 HTML 中的
标签。
- nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。 - pre-wrap 保留空白符序列，随屏幕大小正常地进行换行。
- pre-line 合并空白符序列，但是保留换行符
word-spacing
word-spacing:20px //字间距
CSS三大特性
CSS叠层性
解决样式冲突问题，权重相同，就近原则
CSS继承性
子标签会继承父标签的某些样式，如字号、字体颜色
CSS优先级
| 类别 | 权重（可叠加） |
|---|---|
| * | 0,0,0,0 |
| 每个标签 | 0,0,0,1 |
| 每个类、伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式 | 1,,0,0,0 |
| 每个!impotent | 无穷大 |
自己的优先，可忽略继承权重
CSS背景
语法
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
//多背景案例
background:url() no-repeate top left,url() no-repeate bottom right
:hover{background-position:bottom right,top left}
background-color
background-color:#ffffff //十六进制
background-color:bule //颜色
background-color:rgb(255,0,255)
background-color:rgba(255, 0, 0,0.3)
background-image
background-image: url(bgimage.gif) //图像的URL
//线性渐变
//起始位置，起始颜色，结束颜色
background:linear-gradient(top,green,red)
background:linear-gradient(left top,green,red)
//起始位置，颜色 位置，颜色 位置
background:linear-gradient(left,green 0%,red 50%,blue 100%)
radial-gradient()：径向渐变
repeating-linear-gradient()：重复的线性渐变
repeating-radial-gradient()：重复的径向渐变
background-repeat
background-repeat: repeat //重复
background-repeat: repeat-x //背景图像将在水平方向重复
background-repeat: repeat-y //背景图像将在垂直方向重复
background-repeat: no-repeat //不重复
background-attachment
background-attachment: scroll //默认，背景图像会随着页面其余部分的滚动而移动
background-attachment: fixed //固定
background-position
background-position:center;
background-position:left top|left center|left bottom|right top|right center|right bottom|center top|center center|center bottom //水平垂直位置,如果仅指定一个关键字，其他值将会是"center"
background-position:0％ 0％|100％100％|20% //如果仅指定了一个值，其他值将是50％
background-position10px 20px //水平垂直位置,如果仅指定了一个值，其他值将是50％
background-size
background-size: length|percentage|cover|contain
- length 宽高 如果只设置一个值，则第二个值会被设置为 "auto"
- percentage 以父元素的百分比来设置背景图像的宽度和高度
- cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，图片比例不变
- contain 把图像图像扩展至最大尺寸，完整显示图片
background-origin
//定背景图片的定位区域。图片可以放置于 content-box、padding-box 或 border-box 区域
background-origin:content-box;