css 层叠样式表思维导图
W3C标准或者web标准
1.什么是W3C
其实就是World Wide Web Consortium的缩写,中文是W3C组织或者万维网联盟,W3C这个组织是做什么的呢?简单的说,就是出网页标准的。那么又W3C组织推出的标准就被称为W3C标准或web标准
大家所看到的W3C的文档,其实就是万维网联盟提出的标准
W3C标准或者叫web标准 web标准是一系列的标准
结构层: HTML 用于描述网页的展示结构
表现层: CSS 用于修饰装饰网页的美观度
行为层: JavaScript 用于完成页面的组件
(按钮,动画 事件 或者窗口等一些动态效果
2 .css层叠样式表
英文(Cascading Style Sheets)
主要用于修饰 html xhtml html5 xml 让网页有这种千变万化的形式
语法:选择符{属性:值}
body{font-size:12px;}
1.内嵌式引入
把style标签嵌套在head标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{font-size:36px;}
</style>
</head>
<body>
<p>一些老的<b>浏览器不支持 iframe。</b></p>
<p>如果得不到支持,iframe 是不可见的。</p>
</body>
</html>
2.行内样式
<b style="font-size:56px;">浏览器不支持 iframe。</b>
3.外链样式
把css当成是一个文件,通过link标签引入到html中
<link rel="stylesheet" type="text/css" href="css/main.css">
4.嵌入样式
内嵌和外链一种综合性的使用,不太常用 了解即可
<style type="text/css">
@import url("css/style.css");
</style>
以上4种引入方式,哪种优先级高?
会显示哪种样式 取决于哪种样式离修饰的目标越近
行内样式>剩下的其它三种形式,样式的显示取决于距离
2 .选择符
1.标签选择符:通过标签的名字来命名的
body{color:red;} p{color:red}
对html中的所有该标签都起作用
2.id选择器: 当标签中出现id属性的 那么可以使用id选择器
Id选择器 通常应用于某些标签中独有的样式
Id选择器的标识 是#
#one{
color:gold;
}
3.类选择器:当标签中出现class属性的时候 那么可以使用类选择器
类选择器 通常应用于某几个标签具有相同的样式
类选择器的标识:
.pink{
color:pink;
}
<p class="pink">如果得不到支持,iframe 是不可见的。</p>
4.全选择器 使用*号来表示 对整个html中的所有标签都起作用
*{font-size:36px;color:black;}
适用场景: 每种浏览器的默认属性的相关值都不一样,一般情况在网页开发的初始阶段,需要把所有浏览器的默认值 都归到一个统一的默认值下。然后再进行具体其他操作。
包含选择符:嵌套 中间用空格间隔 包含选择符的标识是空格
#content p{
color:red;
}
5.分组选择符 多个选择符同时具备同一种样式 使用分组选择符 标志 ,(逗号)
body,h1,div,p{
margin:0;
padding:0;
}
6.标签指定式选择符: 中间不会存在任何符号
h1#content{
color:blue;
}
7.组合选择符: 把前面7种选择符 综合的使用在一起
3. 控制字体
设置字号 font-size:12px
设置字色 color:#000000
设置字体 font-family:Arial,'宋体'
设置行高 line-height:150% line-height:1.5em
设置字体的粗细 font-weight:normal[正常]bold[粗体]
单位: px 和em 比较常用 建议大家经常使用百分比,适合做屏幕适配\
4. css特点
1、继承:
网页中子元素,将继承父元素的样式
例如:要控制段落p中的文字大小,可以直接给body标记加样式。
2、层叠:
网页中子元素定义了与父元素相同的样式,则子元素的样式将覆盖掉父元素的样式
后面定义的样式,会覆盖前面定义的样式
5. 控制文本
设置对象中文本缩进 text-indent:2em 可以为负值
文本水平对齐方式 text-align:left[左]center[中]right[右]
对象中空白处理 white-space:normal[自动换行] pre[换行和空白受保护]
nowrap[强制在同一行显示]
文本大小写控制 text-transform:none[正常大小]
capitalize[每个单词的第一个字母转换成大写]
uppercase[转换成大写]
lowercase[转换成小写]
元素的垂直对齐方式 vertical-align:
sub[设置文字为下标]
` super[设置文字为上标]
top[把元素的顶端与行中最高元素的顶端对齐]
text-botton[把元素的低端与父元素字体的低端对齐]
Text-align 它只能控制文本是否居中 不能控制div是否居中
如果想让div居中 要通过盒子模型中margin:0 auto;
所有的网页都要有hn标签 利于搜索引擎搜索
text-indent:-9999em;去隐藏页面的标题。
Text-transform 用于大小写字母转换
6. 伪类
未访问的链接 a:link{color:#ff0000}
已访问的链接 a:visited{color:#00ff00}
鼠标移动到链接上 a:hover{color:#ff00ff}
鼠标按下到链接上 a:active{color:#0000ff}
顺序: L -V-H -A
text-decoration: none;
8. 盒子模型
内边距 padding 用于填充内容内部
外边距 margin 用于描述浏览器边缘到内容的之间的距离
边框 border: 1px solid black
像素值 实线 颜色
Margin:100px 上下左右都是100px的距离
Margin:100px 200px; 上下100px、左右 200px
Margin:100px 200px 300px 上100px 左右 200px 下300px
Margin:100px 200px 300px 400px 上、右、下、左
Margin-top margin-left margin-right margin-bottom
边框也适用于4个方向
9 .块状元素和内联元素
1.块状元素 具有高度和宽度的属性,但是它不允许其他元素和它同行显示
代表标签 div p 等等
块状元素的默认属性: display:block;
2.内联元素 不具有宽度和高度的属性 允许其他元素与其同行显示
代表标签 a span
内联元素的默认属性 display:inline;
块状元素和内联元素之间可以进行转换
Display:none 可以隐藏元素
10. 控制背景
Html中 使用Img标签
Css中 使用background-image url();
背景 background:颜色 图片 平铺方式 固定方式 位置
背景颜色 background-color:#ccc;
背景图像 background-image:url(背景图像的位置及全称)
背景图像的重复方式 background-repeat:[repeat、no-repeat、repeat-x、repeat-y]
背景图像的位置 background-position:top[left center right]
center[left center right] bottom[left center right],坐标 y坐标[第一个值是水平位置,第二个值是垂 直位置。左上角是0 0.单位是像素(0px 0px)]
背景图像的依附方式 background-attachment;[scroll、fixed]
11 .布局
表格布局 table 淘汰掉了
浮动布局 float 属性
什么是浮动
浮动是css实现布局的一种方式,包括div在内的任何元素都可以以浮动的方式进行显示。
值:
none:不浮动
left:对象向左浮动,而后面的内容流向对象的右侧
right:对象向右浮动,而后面的内容流向对象的左侧
Left:
前面的元素浮动效果后,会对后面的元素产生影响
1.清除浮动
当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱现象,可以通过消除浮动的方法来解决,浮动元素的影响
浮动的清理(clear)
值:
none:默认值。允许两边都可以有浮动对象
left:不允许左边有浮动对象
right:不允许右边有浮动对象
both:左右两侧不允许有浮动对象
2.定位布局
属性:positon
描述:设置对象的定位方式
值:
static 静态定位:页面中的每一个对象的默认值。
absolute 绝对定位:将对象从文档流分离出来,通过设置left、right、top、bottom四个方向相对于父级对象进行绝对定位。如果不存在这样的父对象,则依据body对象。
relative 相对定位:对象不从文档中分离,通过设置left,right,top。bottom四个方向相对于自身位置进行相对定位
12 .overflow
visible[默认值。不剪切内容也不添加滚动条],
auto[在必需时对象内容才会被裁切或者显示滚动条],
hidden[ 不显示超过对象的尺寸的内容],
scroll[总是显示滚动条]
3种隐藏元素的方法:
1.display:none
2.width:0 height0
3.overflow:hidden
4.<!DOCTYPE html>
5.<html lang="en">
6.<head>
7. <meta charset="UTF-8">
8. <title>Document</title>
9. <style type="text/css">
10. #box{
11. width: 300px;
12. height:300px;
13. overflow: hidden;
14. border: 1px solid black;
15. }
16.
17.
18.
19. </style>
20.</head>
21.<body>
22. <div id="box">
23. <img src="image/1.png"/>
24. </div>
25.</body>
26.</html>
13.zoom
缩放:
normal:默认值。使用对象的实际尺寸
number:百分数 | 无符号浮点实数。浮点实数值为1.0或百分数为100%时相当于此属性的normal值
zoom:1 解决ie6高度自适应问题