css Cascading Style Sheet 层叠样式表
作用 ：实现网页布局，美化页面元素
CSS 在文档中的三种方式
1 行内样式/内联样式
特点：在具体的html标签中引入css 代码
语法：
所有的html标签都具有一个style属性，属性值就可以使用css样式规则
<标签 style="CSS样式规则"><标签>
css样式规则：
由css属性与值组成 ,属性名与值之间使用：隔开，每一条CSS语句以分号结束
color:red;
常见的CSS属性
1.font-size :设置字体大小，取值为像素值
2 color:设置文本颜色，取值颜色的英文单词
3 background-color 设置背景颜色
2 文档内嵌
1 将css代码从标签中抽离出来，单独写在一起，在html文档中使用<style></style>引入样式表
<style>标签可以在文档的任意地方使用
2 样式表语法：
css选择器
标签选择器：根据给定的标签名，匹配文档中所有的该 元素，并应用样式
3 外部样式表/ 外链方式
优点：
1 真正实现样式与结构的分离，便于维护
2 可以实现样式的复用
使用：1 ，创建外部的css文件
2 在html文档中使用
<link rel="stylesheet">引入样式表文件
3 在样式表中添加样式，通过选择器书写样式
2 样式表特点
1 层叠性
多个css样式共同作用于元素
2 继承性
父元素中设置的样式，子元素可以继承下来
大部分文本相关的属性，都可以被继承，块级元素的宽度与父元素保持一致；
3 样式表的优先级
只有发生样式冲突时，才考虑优先级
优先级从低到高：
1 继承样式
2 浏览器的缺省设置（默认样式）
3 文档内嵌方式 / 外链方式 设置的样式
相同的优先级，发生 样式俚， 由代码的书写顺序决定最终样式，后来者居上
4 行内样式优先级最高
3 选择器介绍：
作用：根据指定的选择模式匹配文档中的元素，并为其设置样式
2 分类 ：标签选择器 / 元素选择器
语法：标签名｛属性：值;｝
使用：
常用于清除页面默认样式，以及设置基础样式
2 根据元素的class属性值进行匹配：
语法：以英文，开关，后面跟上class属性值
注意：
1 写选择器时，不要随便出现任何符号
2 类名自定义，禁止以数字开头，可以出现 数字 字母 尽量 见名知意
3 每个元素都具备class属性，也可以使用多个类名，多个类名之间使用空格隔开
3 根据元素的id属性值匹配元素
每个元素都具备id属性，并且id属性具有唯一性
语法：
以#开头，跟 上id 属性值
#id属性值｛｝
使用：通常页面中具有唯一性的元素，都可以使用id 进行标识，并使用id 选择器添加样式
页面中具有唯一性的元素：外围结构标签
注意：
1 。id 属性具有唯一性，不能重复使用相同的id值。在使用js获取页面元素时，ID是元素唯一的标识，如果出现重复，后面的元素都获取不到
2 。id 选择器与class选择器的区别：
id 具有唯一性，id 选择器定义的样式不能被复用class可以重复使用，类选择器定义的样式可以复用
3 。 具有唯一性的元素都可以使用ID选择器设置样式，外部的结构标签使用id 标识，内部的标签使用 class标识
4 群组选择器
为一组元素统一设置样式
5 后代选择器
依托元素的层级关系匹配后代元素。后代元素包含直接子元素和间接子元素
语法：
选择器1 选择器2｛样式规则｝
6 子代选择器
依托元素的层级关系，匹配直接子元素
语法：
选择器1 > 选择器2{}
表示在选择器1对应的元素中，匹配满足选择器2的直接子元素
7 伪类选择器
1 作用：针对元素的不同状态设置样式
2 分类：
1 超链接伪类选择器
主要针对超链接的不同状态设置样式
：link 超链接访问前的状态
: visited 超链接访问后的状态
2 动态伪类选择器
1 。 :hover 表示鼠标悬停时的状态
下拉菜单的制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
ul{
display: none;
}
.list_:hover ul{
color: red;
display: block;
}
</style> <body>
<div class="list_">下拉菜单
<ul style="list-style: none;padding-left: 0;">
<li>下拉菜单1</li>
<li>下拉菜单2</li>
<li>下拉菜单3</li>
<li>下拉菜单4</li>
</ul> </div> </body>
</html>
---下拉菜单
2 。：active表示鼠标点按时的状态
3 。 ：focus表示获取焦点时的状态，常见于输入框接收用户输入时，就表示获取到焦点
3 使用：
1 伪类选择器必须与其他选择器结合使用，伪类选择器是给元素不同的状态设置样式
2 设置超链接四种状态下的样式
a:link{} 访问前状态
a:visited{} 访问后状态
a:hover{} 悬停状态
a:active{} 活动状态
书写顺序：LoVe/HAte 爱恨原则
3 表单元素获取焦点（针对输入框）
input: focus{
}
1 外边距
1 外边距
2 垂直方向上的外边距，会发生合并取较大的值
水平方向上的外边距，会发生叠加，元素之间的距离较大
3 为子元素添加距上的外边距，作用于父元素上：
解决:
1 为父元素设置上边框（可以使用透明色）
2 为父元素添加顶部的内边距padding-top:0.1px;
2 内边距
1 元素内容与元素边框之间的距离，称为内边距
2 属性:padding
取值：像素值或百分比
1 padding:10px;设置上右下左四个方向的内边距
2 padding:10px ,20px
设置上下内边距为10，左右内边距为20
3 padding:10px,20px,30px;
设置上下内边距分别为10 30 ,左右内边距为20
4 padding:10px 20px 30px 40px
设置上右下左四个方向的内边距
3 单方向内边距的设置
1 属性：
padding-top:内容与元素顶部边框之间的距离
padding-right: 内容与元素右边边框之间的距离
padding-bottom 内容与元素右边框之间的距离
padding-left 内容与元素左边框之间的距离
2 取值为像素值
4 默认带有内边距的元素
ol ul input td ..
5 清除浏览器默认内外边距
body,h1,h2,h3,h4,h5,h6,p,ul,ol,input{margin:0;padding:0}
6 设置盒模型的计算方式
1 属性：box-sizing
作用：指定盒模型的计算方式
取值：
1.content-box:默认值
元素的width height属性只用来规定内容的尺寸，如果元素设置内外边框和边框，最终在文档中占据的尺寸由各种值相加得到
在父元素中设置字体大小为0，解决子元素水平方向上的间隙问题，需要在子元素中重新设置字体大小、
设置box-sizing为border-box时，需要单独考虑外边距
2 border-box:
元素的width height属性，规定的是包含边框，内边距和内容在内的尺寸
4 元素的显示设置
1 设置元素的可见性
属性 visibility
取值：
1 visible 默认值，元素可见
2 hidden 设置元素隐藏 ，元素在文档中仍然占位
2 转换元素类型
属性：display
取值：
1 block ：转换为块元素
2 inline：转换为行内元素
3 inline-block：转换行内块元素
特殊取值：
4 none : 实现元素隐藏,元素在文档中不占位，其他元素会相应的移动
实现元素隐藏与显示：
display:none:隐藏
display:block:显示
5 背景相关的属性
1 background-color
设置背景颜色，取颜色值
注意：
1 所有元素默认的背景颜色都是透明色，新建窗口的白色不是body的背景色，是浏览器渲染的结果
2 背景颜色是从元素的边框位置开始绘制的，如果元素添加内边距，都会被渲染成相应的背景颜色
2 背景图片
1 设置背景图片
属性：background-image
取值：url()
注意：1 背景图片的尺寸如果大于元素尺寸，图片仍然按照原始尺寸显示，超出元素的部分不可见
2 背景图片的尺寸小于元素尺寸，浏览器会自动对背景图片重复平铺，直到铺满元素
3 背景图片与背景颜色一样，不影响元素正常内容的显示
图片尺寸不够时，浏览器会自动沿水平和垂直两个方向对图片进行重复平铺，直到铺满元素
属性：backgroun-repeat
取值：
1 repeat:默认值，沿水平和垂直方向平铺
2 repeat-x 沿水平方向平铺
3 repeat-y 沿垂直方向平铺
4 no-repeat :设置背景图片不重复平铺
3 设置背景图片的位置
1 属性：background-position 结合精灵图实现元素背景图片调整，这种技术叫【精灵技术】
2 取值：x y
1 取像素值：
x:表示背景图片水平方向的偏移距离
正值表示图片向右偏移
负值表示图片向左偏移
y:背景图片垂直方向的偏移距离
正值表示向下偏移
负值表示图片向上偏移
2 取百分比
参照元素尺寸计算水平和垂直偏移距离
1 0% 0% 背景图片显示在元素左上角
2 50% 50% 背景图片显示在元素中间
3 100% 100% 背景图片显示在右下角
3 方位值确定背景图片的位置
x:left / center / right
y: top / center / bottom
如果某一个方向缺失，默认为center
4 设置背景图片的大小
1 属性： background-size
2 取值：x y
x y 分别表示背景图片的宽和高
1 像素值
2 百分比：参照元素宽高尺寸计算背景图片的大小
3 cover ：表示将图片等比放大至完全覆盖元素
超出部分不可见
4 contain : 表示将图片等比拉伸至刚好被元素容纳
不能走出元素尺寸，可能会造成背景图片无法完全覆盖元素的效果
5 背景属性简写
1 属性：background
2 取值：color url() repeat position
注意：
1 背景属性按照一定顺序设置
2 background-size 单独设置
3 可以省略属性值，单独设置颜色，或者背景图片
6 文本相关的属性
1 字体相关的属性
属性：font-size
取值：像素值或em 1em=16px
2 字体的精细程度
属性：font-weight
取值：
1 关键字 light / normal(正常) / bold（加粗）
2 整百数值 100-900
100(lighter) ~ 400 (normal) ~ 900(bolder)
3 字体名称
1 属性：font-family
2 取值：字体名称
注意：
1 如果字体名称是中文或者由多个英文单词组成， 需要使用引号引起来
font-family:"微软雅黑";
font-family:“Microsoft YaHei”
font-family:serif;
2 同时指定多个字体名称，之间使用英文逗号间隔，当浏览器不支持第一种字体时，会按照顺序依次以后面指定字体名称显示
et:
font-family:"黑体","微软雅黑","宋体"
4 字体样式（是否采用斜体）
1 属性：font-syle
2 取值：
1 normal 正常显示
2 italic 斜体显示
3 oblique 倾斜显示
注意：oblique可以将字体倾斜一定角度，默认倾斜效果与italic斜体没有差别
5 字体属性简写
1 属性：font
2 取值：style weight size family;
注意 ：
1 同时设置四个属性值时，参照给定顺序书写
2 font-family font-size 是必填项，不能省略
2 文本相关的属性
1 文本颜色
1 属性：color
2 取值：颜色值
2 文本装饰线
1 属性：text-decoration
2 取值：
1 underline:下划线
2 overline ：上划线
3 line-through:删除线
4 none:取消装饰线
3 文本水平对齐方式
1 属性：text-align
2 取值：
1 left / center / right
2 justify 两端对齐
4 设置行高
行高指的是一行文本所占的高度
1 属性：line-height
2 取值：像素值 或em
用法：
1 设置行高与元素高度相同，实现一行文本的垂直居中
2 line -height > height ,文本会下移
3 line-height < height, 文本会上移
注意： 文本内容在当前行中始终是垂直居中的，
特殊取值：
取无单位的数值，表示当前字体大小的倍数，由此计算行高
p{font-size:20px;line-height:2;} (当前行高为字体大小的2倍，40px)
7 表格相关的属性
1 基础样式是通用的
2 独有的css属性：
1 边框合并
属性：border-collapse
取值：
1 seperate :默认值，单元格边框与表格边框相分离
2 collapse:设置表格边框与单元格边框合并
注意：
1 .td 不支持margin
2 .border-collapse 只能在table中使用，独有属性，其它元素不能使用它
2 设置边框边距
属性：border-spacing
取值： h-value v-value
1 h-value:水平方向边框之间的距离
2 v-value :垂直方向边距之间的距离
两个值之间使用空格隔开
注意：
边框边距只能在边框分离状态下设置，合并时无法使用
css Cascading Style Sheet 层叠样式表的更多相关文章
- CSS（Cascading Style Sheet）简述
CSS(Cascading Style Sheet)简述 什么是CSS? css是指层叠样式表 css定义了如何显示HTML元素 css的诞生是为了解决内容与表现分离的问题,可以极大地提高工作效率 样 ...
- CSS（Cascading Style Sheet，叠层样式表），作用是美化HTML网页。
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/ 此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...
- CSS(Cascading Style Shee)
1.CSS是Cascading Style Sheet这个几个英文单词的缩写,翻译成中文是“层叠样式表”的意思 CSS能让网页制作者有效的定制.改善网页的效果. CSS是对HTML的补充,网页设计师曾 ...
- 2016/2/19 css样式表 Cascading Style Sheet 叠层样式表 美化HTML网页
一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联 ...
- CSS( Cascading Style Sheets )简书
(注:带*号的属性是CSS3新增属性)一.基本规则1.css通常存储在样式表(style)中,用于定义如何显示HTML元素:2.css主要由两个部分构成:选择器和一条或多条声明. 选择器通常是需要改变 ...
- 00Cascading Style Sheet
Cascading Style Sheet CSS(Cascading Style Sheet)即层叠样式表,简称样式表.要理解层叠样式表的概念先要理解样式的概念.样式就是对网页中的 元素(字体.段落 ...
- CSS层叠样式表(Cascading Style sheets)
CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...
- 深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）
标题中的 Cascading 亦可以理解为级联. 进入正文,这是一个很有意思的现象.可以直接跳到 总结一下 部分,看完再回过头来阅读本文. 引子 假设我们有如下结构: <p class=&quo ...
- How to include cascading style sheets (CSS) in JSF
In JSF 2.0, you can use <h:outputStylesheet /> output a css file. For example, <h:outputSty ...
随机推荐
- SringCloud学习成长之路 八 消息总线
Spring Cloud Bus 将分布式的节点用轻量的消息代理连接起来.它可以用于广播配置文件的更改或者服务之间的通讯,也可以用于监控.本文要讲述的是用Spring Cloud Bus实现通知微服务 ...
- mariadb升级
官方文档升级:https://mariadb.com/kb/en/library/upgrading/ 1.备份原来的数据库和配置文件 # mysqldump -u root -p -A > a ...
- centos6.8 ssh 问题
xshell用ROOT不能登录 需要把 /etc/ssh/sshd_config 中的端口新建一个 不能用默认的
- Spring Cloud(7)：事件驱动（Stream）分布式缓存（Redis）及消息队列（Kafka）
分布式缓存(Redis)及消息队列(Kafka) 设想一种情况,服务A频繁的调用服务B的数据,但是服务B的数据更新的并不频繁. 实际上,这种情况并不少见,大多数情况,用户的操作更多的是查询.如果我们缓 ...
- iOS- Core Foundation对象与OC对象相对转换
对ARC盲目依赖的同学: 1过度使用block后,无法解决循环引用问题 2遇到底层Core Foundation对象,需要自己手工管理它们的引用计数时,显得一筹莫展 first:对于底层Core Fo ...
- CenOS 7 安装JDK
1.输入安装命令 yum install java-1.8.0-openjdk-devel.x86_64
- spring 中常用的两种事务配置方式
引用:http://blog.csdn.net/qh_java/article/details/51811533 引用:http://www.cnblogs.com/rushoooooo/archiv ...
- php 的 socket简单原理及实现
什么是socket socket:网络上的两个程序通过一个双向的通信连接实现数据的交换,连接的一端称为一个socket. 因此socket运行是置少有2个端组成,一个为服务端一个为客户端(客户端可以多 ...
- opencv 直方图
1.简介 对输入图像进行直方图均衡化处理,提升后续对象检测的准确率在OpenCV人脸检测的代码演示中已经很常见.此外对医学影像图像与卫星遥感图像也经常通过直方图均衡化来提升图像质量. 图像直方图均衡化 ...
- Java线程安全队列Queue实现原理
原文链接:https://www.cnblogs.com/DreamRecorder/p/9223016.html 在Java多线程应用中,队列的使用率很高,多数生产消费模型的首选数据结构就是队列.J ...