CSS 层叠样式表(英文全称：Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化,并且能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力,通常情况下CSS会配合DIV标签一同使用.
CSS全称层叠样式表(Cascading Style Sheets),CSS使得网站可以,创建文档内容清晰地独立于文档表现层,样式表定义如何显示HTML元素,样式通常保存在外部的.css文件中.通过仅仅编辑一个简单的 CSS 文档,外部样式表使你有能力同时改变站点中所有页面的布局和外观,由于允许同时控制多重页面的样式和布局,CSS 可以称得上WEB设计领域的一个突破.作为网站开发者,你能够为每个HTML元素定义样式,并将之应用于你希望的任意多的页面中.如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新.
CSS 的引用方法
直接引用: 直接在HTML标签的后面加上style类型声明即可,多个类型请用分号隔开.
hello lyshark
hello div
头部引用: 直接在HTML头部使用style类型声明,以下是对div标签进行修改的代码.
外部引用: 外部引用是最常用的一种引用方式,就是将CSS与HTML代码分离,方便管理.
导入引用: 此引用方式,有一定的局限性,而且受引用数量的限制,一般不使用,了解即可.
CSS 常用选择器
通用选择器: 通用选择器就是使用星号来标注,则会对所有的页面元素生效,也就是全局生效.
这是DIV标签这是P标签2
这是P标签1
标签选择器: 比如使用以下方法,就可以使指定的DIV标签进行修改,凡是全局范围的DIV标签都会应用.
这是DIV标签1这是DIV标签2这是P标签2
这是P标签1
ID选择器: 以下案例中只对ID=div_id1的标签修改,警号代表ID调用,注意的ID号是唯一的不能够重复.
这是DIV标签1这是DIV标签2
Class选择器: 以下案例就是类选择器的使用技巧,类选择器一般用句号代表,该类的名称允许重复.
这是DIV标签子标签也会变子标签也会变
嵌套选择器: 如下嵌套,查找id=outher标签,里面的class=A1,里面的class=B1,将其变成红色.
hello A1hello B1hello A2
组合选择器: 组合的意思就是将一些标签组合在一起,让它们使用相同的CSS代码.
hello divhello h1
hello P
后代选择器: 后代也就是继承的意思,以下所有在h1标签内的em标签中的内容全部变成红色.
hello lyshark
hello lyshark
子代选择器: 如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器.
hello lyshrk lyshrk
hello lyshrk
相邻选择器: 通过使用相邻选择器,如下解释,将把h1标签的后面的第一个p标签变成红色.
This is a heading.
This is paragraph.
This is paragraph.
This is paragraph.
属性选择器: 通过属性选择器实现选择指定的标签,过程中可以指定My=lyshark这样的自定义类型.
hello lysharkhello lysharkhello lyshark
伪元素选择器(1): 鼠标经过超链接呈现出不同的状态,或者点击超链接会出现不同的效果.
这是链接在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后,这样才能生效
在 CSS 定义中,a:active 必须位于 a:hover 之后,这样才能生效
伪元素选择器(2): 伪元素after的功能是在P标签后面添加一行内容,而before功能则是在P标签前添加.
---name---
CSS 常用的属性
颜色属性: 颜色属性,多用于对标签的配置,以下列举的方式为最常用的四种颜色选择方式.
红色的h1标签
橙色的h1标签
黄色的h1标签
紫色的h1标签
字体属性: 字体属性用来调节网页中的各种字体的显示效果,包括调节字体大小,类型,状态等.
< ----------------------[设置字体大小]---------------------- >设置字体大小15像素
设置全局字体30%
设置字体格式
< ----------------------[设置字体类型]---------------------- >设置微软雅黑
设置华文新魏
设置新宋体
< ----------------------[设置字体状态]---------------------- >默认值
直接赋值
显示加粗
显示更粗
显示更细
< ----------------------[添加字体阴影]---------------------- >添加字体阴影
向左上角投影
向左下角投影
< ----------------------[其他常用状态]---------------------- >添加下划线
添加批注横批
全部字母大写
全部字母小写
背景属性: 背景属性用于控制背景色,背景图片等一些显示格式,还可以控制背景图片的排列方式.
设置背景颜色为红色 设置图像大小 居中显示图片 不重复图片 固定图片位置 重复铺满图片 设置背景图片 向X轴重复 向Y轴重复 简写模式 简写实例
文本属性: 文本属性用于控制整个段落,或者是整个div元素的显示效果,包括缩进文字对齐等.
< ----------------------[常用文本控制]---------------------- >行首缩进150像素字符间距10像素单行间距20像素控制文本行高强制不换行,直到遇到br< ----------------------[文本排列控制]---------------------- >居中对齐居右对齐居左对齐文本从左边流入文本从右边流入
边框属性: 边框属性用于设置目标对象的边框特征,包括边框颜色,粗细,以及使用线条等.
< ----------------------[常见边框类型]---------------------- >普通边框none #无边框 inherit #继承solid #直线边框 groove #凸槽边框dashed #虚线边框 ridge #垄状边框dotted #点状边框 inset #边框double #双线边框 outset #边框< ----------------------[常用边框格式]---------------------- >细线边框px #固定值的边框 thick #粗边框 inherit #继承medium #中等边框 thin #细边框< ----------------------[常用边框颜色]---------------------- >边框简写格式椭圆边框红色边框紫色边框黄色边框黄色边框
位置属性: 位置属性就是指定元素的位置,它可以用来控制任何网页元素在浏览器文档窗口中的位置.
< ----------------------[位置调节属性]---------------------- >left: 设置元素左边的水平位置top: 设置元素顶部的垂直位置width: 设置元素显示的宽度像素height: 设置元素显示的高度像素z-index: 设置叠层的优先级,常用于模态对话框< ----------------------[常用定位属性]---------------------- >position: 用于设定队形的定位方式,分别有以下三种取值.-> absolute(绝对定位) 精确的定位元素在页面的独立位置,不考虑页面上的其他元素位置.-> relative(相对定位) 相对定位所设定的位置是相对于元素通常应在的位置的偏移量.-> static(无特殊定位) 默认方法,使用HTML中通常的定位方法,不用再专门设置元素的位置值.
布局属性: 布局属性用于指定元素在网页中如何放置,主要包括以下几种属性.
< ----------------------[控件显示属性]---------------------- >visibility: 用于设置元素的可见状态,默认有以下三种属性：-> inherit 继承父层的显示属性-> visible 显示在网页中-> hidden 隐藏指定元素display: 用于设置元素的可见状态,默认有以下4种属性：-> block 在元素的前和后都会有换行-> inline 在元素的前和后都不会有换行-> list-item 与block相同,但增加了目录列表项标记-> none 不显示元素,也就是隐藏元素.< ----------------------[控件其他属性]---------------------- >clip: 用于绝对定位元素的可视区域,其他的区域隐藏:-> clip:rect(top,right,bottom,left)overflow: 设置如果元素中内容超出了元素的大小时如何处理:-> visible 增加元素的显示空间大小-> hdden 保持元素的显示大小不变-> scroll 表示总是显示滚动条-> auto 超出显示大小才显示滚动条float: 设置元素是否为浮动模式,可设置左浮动和右浮动:-> left 表示文本在这个元素的左边-> right 表示文本在这个元素的右边-> none 表示这个元素两边不能有空文本clear: 清除该元素旁边的其他浮动对象,常与float通用:-> both 表示不允许有浮动的对象-> none 允许两边都可有浮动对象-> left 不允许左边有浮动的对象-> right 不允许右边有浮动的对象page-break-before:always: 设置打印该元素前是否强制分页page-break-after:always: 设置打印该元素后是否强制分页
边缘属性: 边缘属性包括元素边界的矩形区域的特征,边缘属性包括margin,padding,width,style.
< ----------------------[3个边界属性]---------------------- >margin: 设置元素边界与头元素之间的空隙大小.padding: 设置元素边界与内容之间的空隙大小.border: 设置元素内间隙与外间隙之间的距离.< ----------------------[属性与颜色]---------------------- >border-top-width 指定上边框宽度border-right-width 指定右边框宽度border-bottom-width 指定下边框宽度border-left-width 指定左边框宽度border-top-color 指定上边框颜色border-top-style 指定上边框样式
列表属性: 列表属性用于设置列表项标记的类型,列表项图片和位置,以提供灵活列表显示.
list-style-type:none 无标记-> disc 默认,标记是实心圆-> circle 标记是空心圆-> square 标记是实心方块-> decimal 标记是数字-> lower-alpha 小写英文字母-> upper-alpha 大写英文字母-> decimal-leading-zero 0开头的数字标记< ------------------------------------------------------- >list-style-position:inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐-> outside 默认值,保持标记位于文本的左侧-> inherit 规定应该从父元素继承list-style-position属性的值< ------------------------------------------------------- >list-style-image:URL 图像的路径-> none 默认无图形被显示-> inherit 规定应该从父元素继承list-style-image属性的值 简写方式: list-style:square inside url('./arrow.jpg'); CSS 之盒子模式
所有的页面的元素都可以看成是一个盒子,占据一定的页面空间,占据的空间要比实际使用的空间要大得多,我们可以调整盒子的边框和距离,来调整盒子(页面和页面中的元素)的位置,盒子模型是由:内容(Content)、边框(Border)、间隙(padding)、外间隔(margin)组成,为了便于理解可以把盒子模型想象成一幅画,content是画本身,padding是画与画框的留白,border是画框,margin是画与画之间距离,他们的关系如下图所示:
盒子演示实例: 盒子的自由定位例子,以下代码配合边框调节,用来练习盒子的自由定位.
元素居中设置: 将DIV容器设置到页面的正中心,并可以自动的调整页面的大小,容器中可放内容.
.form-center{ width: 100px; height: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } 脱离文档流居中:
元素放置右下角: 将元素放置在屏幕右下角,通过定位position:fixed选项实现这一效果.
.form-right{ background-color: #5f2dab; width: 300px; height: 100px; position: fixed; right: 20px; bottom: 10px; } 实现页面小尖角: 在页面的指定位置绘制小倒转的尖角符号.
.icon { display: inline-block; border-top:15px solid red; border-right:15px solid transparent; border-bottom:15px solid transparent; border-left:15px solid transparent;} float浮动模式: 通过使用float:left选项,使元素自动浮动在其他标签之上,可设置浮动的位置,使用clear清理格式.
底部菜单
后台布局: 最后一个简单的后台布局.
Title hello world