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;//显示