结构(位置)伪类选择器(CSS3)
:first-child: 选取属于其父元素的首个子元素指定选择器
:last-child: 选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n): 匹配属于其父元素的第N个子元素 不论元素的类型
:nth-last-child(n): 选择器匹配属于其元素的第N个子元素的每个元素 不论元素的类型 从最后一个子元素开始计数
n可以是数字、关键词或公式
目标伪类选择器
:target 目标伪类选择器 : 选择器可用于选取当前活动的目标元素
CSS注释
css规则是使用 /* 需要注释的内容 */ 进行注释的 即在需要注释的内容前使用"/*"标记开始注释,在内容的结尾使用"*/"结束
例如
p {
font-size: 14px; /* 所有的字体是14像素大小 */
}
CSS外观属性
color: 文本颜色
color属性用于定义文本的颜色 其取值方式有如下3种:
-
预定义的颜色值 如 red green blue 等
-
十六进制, 如#FF0000 = #F00, #FF6600 #F60, #29D794等 实际工作中 十六进制是最常用的定义颜色的方式
-
RGB代码 如容色可以表示为 rgb(255,0,0) 或者 rgb(100%,0%,0%)
需要注意的是 使用RGB代码百分颜色值 取值为0时也不能省略百分号 必须写为0%
line-height: 行间距
line-height 属性用于设置行间距 就是行与行之间的距离 即字符的垂直间距 一般称为行高 line-height常用的属性单位有三种,分别为像素px 相对值rem 百分比% 实际工作中使用最多的是像素px
text-align: 水平对齐方式
text-align:属性用于设置文本内容的水平对齐 相当于html中的align对齐属性 其可用属性值如下 :
left : 左对齐(默认值)
right : 右对齐
center : 居中对齐
text-indent : 首行缩进
text-indent属性用于设置首行文本的缩进 其属性值可为不同单位的数值 em字符宽度的倍数 或相对于浏览器窗口宽度的百分比% 允许使用负值 建议使用em作为设置单位
1em 就是一个字的宽度 如果是汉字的段落 1em就是一个汉字的宽度
letter-spacing : 字间距
letter-spacing属性用于定义字间距 所谓字间距就是字符与字符之间的空白 其属性值可谓不同单位的数值 允许使用负值 默认为 normal
word-spacing : 单词间距
word-spacing属性用于定义英语单词之间的间距 对中文字符无效 和 letter-spacing一样 其属性值可为不同单位的数值 允许使用负值 默认为 normal
word-spacing和letter-spacing均可对英文进行设置 不同的是letter-spacing定义的为字母之间的间距 而word-spacing定义的为英文单词之间的间距
word-break: 自动换行
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角或连字符处换行
颜色半透明(CSS3)
文字颜色到了CSS3我们可以采取半透明的格式了 语法格式如下 :
color: rgba(r,g,b,a) a是alpha 透明的意思 取值范围 0~1 color: rgba(0,0,0,3)
文字阴影(CSS3)
以后我们可以给我们的文字添加阴影效果 Shadow 影子
text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色
前两项是必须要写的 后两项可以选写
引入CSS样式表(书写位置)
CSS可以写到哪个位置? 是不是一定要写到html文件里面呢?
内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中 并且用style标签定义 其基本语法格式如下:
<head>
<style type="text/CSS">
选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
语法中, style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何位置
type="text/CSS"在 html5 中可以省略不写 写上也比较符合规范 所以这个地方可以写也可以省略
行内式(内联样式)
内联样式 又有人称行内样式 行间样式 内嵌样式 是通过标签的style属性来设置元素的样式 语法如下:
<标签名 style="属性1:属性值1; 属性2:属性值2;"> 内容 </标签名>
语法中style是标签的属性 实际上任何HTML标签都拥有style属性 用来设置行内式 其中属性和值的书写规范与CSS样式规则相同 行内式只对其所在的标签及嵌套在其中的子标签起作用
外部样式表(外链式)
链入式是将所有的样式放在一个或多个以 .css 为扩展名的外部样式表文件中 通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:
<head>
<link href="css文件的路径" type="text/CSS" rel="stylesheet" />
</head>
注意: link是单标签哦~~~~
该语法中,link标签需要放在head头部标签中 并且必须指定link标签的三个属性 , 具体如下:
href: 定义所链接外部样式表文件的URL,可以是相对路径 也可以是绝对路径 type: 定义所链接文档的类型, 在这里需要指定为"text/css",表示链接的外部文件为css样式表 rel : 定义当前文档与被链接文档之间的关系,在这里需要指定为"stylesheet"表示被链接的文档是一个样式表文件
三种样式表总结 :
标签显示模式 (display)
标签的类型(显示模式)
HTML标签一般分为块标签和行内标签两种类型 他们也称块元素和行内元素 具体如下 :
块级元素(block-level)
每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度 高度 对齐等属性 常用语网页布局和网页结构的搭建
常见块元素有<h1>~<h6> <p> <div> <ul> <ol> <li>等,其中<div>标签是最典型的块元素
块级元素的特点 :
-
总是从新行开始
-
高度 行高 外边距以及内边距都可以控制
-
宽度默认是容器的100%
-
可以容纳内联元素和其他块元素
行内元素 (inline-level)
行内元素(内联元素)不占有独立的区域 仅仅靠自身的字体大小和图像尺寸来支撑结构 一般不可以设置宽度 高度 对齐等属性 常用于控制页面中文本的样式
常见的行内元素有<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span> 等 其中<span>标签最典型的行内元素
行内元素的特点:
-
和相邻行内元素在一行
-
宽 高 无效 但水平方向的padding和margin可以设置 垂直方向的无效
-
默认宽度就是他本是内容的宽度
-
行内元素只能容纳文本或其他行内元素 (a特殊)
注意 :
-
只有文字才能组成段落 因此 p 里面不能放块级元素 同理还有这些标签 h1~h6 dt 他们都是文字类块级标签 里面不能放其他块级元素
-
链接里面不能在放链接
块级元素与行内元素区别
块级元素的特点: 1. 总是从新行开始 2. 高度, 行高 外边距以及内边距都可以控制 3. 宽度默认是容器的100% 4. 可以容纳内联元素和其他块元素
行内元素的特点 1. 和相邻行内元素在一行上 2. 高 宽无效 但水平方向的padding和margin可以设置 垂直方向的无效 3. 默认宽度就是他本身内容的宽度 4. 行内元素只能容纳文本或其他行内元素
行内块元素(inline-block)
在行内元素中有几个特殊的标签--<img /> <input /> <td> 可以对他们设置宽高和对齐属性 有些资料可能会称他们为行内块元素 行内块元素的特点 : 1. 和相邻行内元素(行内块)在一行上 但是之间会有空白缝隙 2. 默认宽度就是他们本身内容的宽度 3. 高度 行高 内外边距可以以控制
标签显示模式转换 display
块转行内 : display: inline;
行内转块 : display: block;
块、行内元素转换为行内块 : display : inline-block;
此阶段, 我们只需要这三个 其他的是我们后面的工作
CSS复合选择器
复合选择器是由两个或多个基础选择器 通过不同的方式组合而成的 目的是为了可以选择更精准更精细的目标元素标签
交集选择器
交集选择器由两个选择器构成 其中第一个为标签选择器 第二个为 class 选择器 两个选择器之间不能有空格 如 h2.special
交集选择器是并且的意思 即 ...又...的意思
比如: p.one 选择的是: 类名为 .one 的段落
用的相对来说比较少 不太建议使用
并集选择器
并集选择器(css选择器分组)是各个选择器通过逗号链接而成 任何形式的选择器(包括标签选择器,class类选择器id选择器等),都可以作为并集选择器的一部分 如果某些选择器定义的样式完全相同 或 部分相同 就可以利用并集选择器为他们定义相同的CSS样式
记忆技巧 :
并集选择器 和 的意思 就是说 只要逗号隔开的 所有选择器都会执行后面的样式
比如 .one,p,#test {color:#foo;}表示 .one p #test 这三个都会执行颜色为红色 通常用于集体声明
后代选择器
后代选择器又称为包含选择器 用来选择元素或元素组的后代 其写法就是把外层标签写在前面 内层标签写在后面 中间用空格分隔 当标签发生嵌套时 内层标签就称为外层标签的后代
子元素选择器
子元素选择器只能选择作为某元素子元素的元素 其写法就是把父级标签写在前面 子级标签写在后面 中间跟一个 > 进行连接 注意 符号左右两侧各保留一个空格!!!!!!
扫一扫
821
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
