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 ...
随机推荐
- springboot Thymeleaf中格式化jsr310新日期时间类(LocalDateTime,LocalDate)--thymeleaf格式化LocalDateTime,LocalDate等JDK8新时间类
依赖maven包 <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>th ...
- Golang 项目 GOPATH 总结
查看GOPATH go env 项目里执行:go get github/winyh/XXX 命令时, 包会下载到 GOPATH第一个目录下的src文件夹 项目里引入依赖的时候会自动到GOPATH里 ...
- 添加zookeeper到服务，并设置开机启动
一.先安装jdk jdk 路径为/usr/local/java 二.再安装zookeeper zk路径为/use/local/zookeeper 三.创建zookeeper脚本 cd /etc/rc. ...
- 【c# 学习笔记】c#中的语句
1.条件语句: if语句: bool condition = true; if (condition) { } else if (condition) { } else { } switch语句: b ...
- vue等单页面应用及其优缺点
优点: Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件,核心是一个响应的数据绑定系统.MVVM.数据驱动.组件化.轻量.简洁.高效.快速.模块友好. 缺点: 不支持低版本 ...
- Andrew Ng机器学习课程17(2)
Andrew Ng机器学习课程17(2) 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:主要介绍了利用value iteration和policy i ...
- xmind常用快捷键
1-新建导图Ctrl+shift+N2-编辑文字空格键3-插入图片Ctrl+i4-插入主题Enter键5-插入主题之前Shift+Enter键6-插入子主题Tab键7-放大导图“Ctrl”+“+”,先 ...
- K8S 从入门到放弃系列文章目录（Kubernetes 1.14）
1)软件环境 软件 版本 系统 Centos7.5 Kubernetes 1.14.1 Docker 18.09 Calico 3.6 Etcd 3.3.12 2)部署过程简单概要 三台master节 ...
- 【C++札记】动态分配内存(malloc,free)
介绍 操作系统中存在一个内存管理器(Memory Manager),简称MM,它负责管理内存. MM提供的服务:应用程序可以向MM申请一块指定大小的内存(借出),用完之后应用程序应该释放(还回). 所 ...
- 02 servlet基础 生命周期 tomcat web.xml
新建web项目 – new Web Project – 选择:javaee 5.0 建包 – com.gzsxt.wang 新建class:FirstServlet – 继承:HttpServlet( ...