CSS 层叠样式表
结构,表现,行为要分离
1.内联样式 :写在标签内部的style属性里 (不便于复用)
<p style=color :red></p>
2.内部样式 :写在头部的style标签里 <style type="text/css">
3.外联样式:使用link标签引入<link rel="stylesheet" type="text/css" href="路径" />
CSS注释 /* 选择器 声明块 /
块和内联
块元素 独占一行的元素
div(对页面进行布局) p h1~h6 ul(无序列表) li
设置背景元素 background-color
内联元素(行内元素):span(包裹内容 单独设置字体颜色) a img iframe
超链接可以包含任意一个元素
a标签可以包含任何元素,但不能包含它本身
CSS选择器
id选择器:id是唯一标识 #
类选择器:class 可以重复 .
选择器分组(并集选择器):共同使用一个样式 #p1,h1,p2 逗号隔开
通配选择器: 选中页面上所有元素
复合选择器(交集选择器):同时满足两个条件
子元素和后代元素选择器:空格表示
伪类选择器:给链接定义样式
正常链接 a:link
访问过的链接 a:visited(只能定义字体颜色)
鼠标滑过的链接 a:hover
正在点击的链接 a:active
1.获取焦点 :focus 文本框背景
2.指定元素前 :before
3.指定元素后 :after
4.选中的元素 ::selection
首字母 :first-letter
首行 :first-line
before 最前面 after 最后面
属性选择器
title 会在网页中作为一个提示文字
例:
p[title] 同时选中title属性得标签
p[title="hello"] 选中title等于hello得标签
p[title^="ab"] 以ab开头
3.子元素选择器
:first-child 既得满足是第一个p标签又得满足是第一个标签
:body>p:first-child 表示body标签下得第一个p标签
:last-child 选择最后一个子标签
:nth-child 选择指定位置的子元素可以写数字或者even(偶数)odd(单数)
:first-of-tytpe 选择指定位置得子元素 所有p标签里第一个就可以
:last-of-tytpe
兄弟元素选择器
span+p{} 紧挨着span下面得p 后一个兄弟选择器
span~p{} span下面得所有p元素 后边所有兄弟
否定伪类
p:not(.hello) 除了hello以为得改
样式继承
背景边框和定位不会被继承
6.选择器得优先级(权重)
1.内联样式
2.id选择器
3.类和伪类选择器
4.元素选择器
5.通配*,优先级0
6.继承的样式没有优先级
7.文本标签
em一段内容的着重点(斜体)
strong一段的重要性(加粗)
i 斜体 在H5中 i代表 icon(图标)
b 加粗
small 小 表示细则或版权声明等小字
big 大
cite 书名号 表示参考的内容
blockquote(块)论坛引用某个人的评论
sup 设置上标
sub 设置下标
p标签不能用块
ins 插入内容 自动加下划线
del 删除 划掉内容
code 表示一段代码
pre 保留格式
列表
网页中的三种列表
1.无序列表ul li(块)
2.有序列表ol li(块)
3.定义列表dl dt(被定义的内容) dd(对定义内容的描述)
去掉项目符号 list-style:none
单位
px 像素
% 根据父元素的大小计算子元素多大(根据父元素发生变化子元素也跟着改变)
em 1em=1font-size
CSS
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...