CSS[Cascading Style Sheet]
定义：
主要功能是定义网页的外观（如字体颜色等）显示样式，他可以和JavaScript等浏览器等脚本语言相互结合使用。CSS是用来美化页面的 可以控制网页的外观表现。
分类：
1.页内直接设置CSS：在当前页面直接指定样式 就像化妆品一样直接与皮肤接触
2.第三方页面设置：在别的网页单独设置CSS,然后通过文件调用这个CSS来实现指定的显示效果，就像围巾和包包一样，起了一个搭配的作用。
优点：
1.实现了内容与表现分离，使网页的内容与表现完全分开
2.使网页的表现非常统一，并且容易修改
3.可以支持多种设备，例如手机，PDA，打印机，电视机，游戏机等
4.可以减少网页的代码量，增加网页的浏览速度，减少硬盘的占用空间
CSS元素：
- 块元素：
房子的结构 大件 块元素一般从新行开始，并且大都可以容纳内联元素和其他块级元素
排列方式：
默认排列方式是换行排列
div p h1-h6 table ul ol dl form pre//块级元素
- 内联元素：大件里面的小件 卫生间中的浴池
排列方式：
默认排列方式是顺序同行排列 宽度超出包含他的容器本身的宽度时才自动换行
a span input img label select strong br//
- 可变元素：修饰处理
CSS 的引用方式
- 行内样式
<any style="样式名:样式值"></any>
- 页面内样式
<head>
<style>
标签名{
样式名：样式值;
}
</style>
</head>
- 外部样式
<head>
<link rel="stylesheet" type="text/css" href="链接样式表文件.css"/>
</head>
- 优先级
行内>页面内>外部样式表
CSS设置和修饰
- 文本设置
color:red;//字体颜色：红色；
text-align:center;//文本居中 left/center/right/justify 左/中/右/两端对齐
font-weight:bold;//字体加粗
font-style:italic;//字体倾斜
text-decoration:underline/none;// 下划线/去掉下划线
text-indent:2em;//首行缩进两个字符
vertical-align:bottom;//文本的垂直对齐方式 bottom/middle/top
line-height:30px;//页面文本的行高
//一般用行高布局垂直对齐方式
//行高=高度，内容在垂直正中间
//行高>高度，内容偏下
//行高<高度，内容偏上
text-transform:uppercase/lowercase/capitalize;//文本转换 大写/小写/首字母大写
font-size:19px;//字体大小：19px;
font-family:宋体；
font:19px 宋体；//字体大小 字体
- 背景设置
background:背景颜色 背景图片 背景是否重复 背景定位位置；
//背景图片 url(图片路径)
//是否重复 repeat/no-repeat/repeat-x/repeat-y 重复/不重复/水平重复/垂直
//背景定位位置 left/center/right 水平左/中/右 top/center/bottom 垂直上/中/下
background-size:精确像素/百分比/em/rem;
backgroung-attachment:scroll;背景图片固定定位 scroll滚动 fixed固定
- 边框设置
border:solid 1 px #000;//边框线：实线 线粗细 颜色；
border-style:属性；
//线型：solid 实线 double 双线 dotted 点状线 dashed 虚线 none 无边框线
//groove 定义3D沟槽边界 效果取决于边界的颜色值
//ridge 定义3D脊边界 效果取决于边界的颜色值
//inset 定义一个3D的嵌入边框 效果取决于边界的颜色值
//outset 定义一个3D的突出边框 效果取决于边界的颜色值
必须在改变其颜色之前获得边框
- 列表设置
对ul和li的显示样式进行修饰
list-style-type:disc/circle/square; 实心圆/空心圆/实心方块
list-style-images:none/url;
list-style-position:outline/inside; 符号在文本外显示/文本内显示
list-style:list-style-type/list-style-position/list-style-image;
选择器
- 类选择器的定义方式
命名：.name:{}
调用：<any class="name"></any> - 标签选择器的定义方式
命名：标签名{} //p{}
调用：<标签></标签> - ID选择器的定义方式
命名：#name{}
调用：<any id="name"></any> - 伪类选择器的定义方式
正确使用修饰链接4个伪类的顺序为：
link:没有被访问的超链接
visited：页面超链接被访问后的显示效果
hover：鼠标放在链接上时的效果
active：鼠标点击时的状态 - 后代选择器的定义方式
格式：父元素/祖先元素 子元素
eg：div a/.nav a - 父子选择器的定义方式
父元素>子元素
eg: .box>a
网页中的图片格式
jpg gif png webp
网页中常用的图片格式有GIF和JPEG两种，能够在任何浏览器中正常显示。
盒子模型
一个网页其实就是一个大容器，在网页上展示的信息就像在容器中装东西一样。CSS中的所有文档元素都会生成一个由边界，边框等元素组成的矩形框，这个矩形框就是盒模型。
盒模型的内容所遵循的原则如下所示：
- 当盒模型内的内容大于容器空间时，内容的显示顺序是从左到右
- 当内容超过定义的容器宽度时，将自动换行显示。
padding:（上 右 下 左）
auto对padding属性不起作用
指边框内边缘和内容外边缘之间的区域
不可以接受负值
margin:（上 右 下 左）
设置页面元素的边界大小
水平auto:
在元素模型的水平方向上，非浮动块元素盒模型的各部分宽的和等于父元素的宽度。auto的值就是填充父元素宽度的默认值（子元素无边框条件下）
垂直auto:
通常被设置为0，表示没有边界
布局
- 浮动流
- 标准流
- 浮动流+标准流=混合流
通配符*
*{
margin:0;
padding:0;
}
display:block;//显示
disolay:none;//隐藏 不占位置
visibility:hidden;//隐藏 占位置
visibility:visible;//显示
712
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
