您的位置：首页 > Web前端 > CSS

Java笔记--Web前端知识汇总之二 CSS

2016-09-02 23:39 453 查看

CSS

一.组织页面方式

早期: table组织页面

现在: div+css组织页面

二.CSS

1.div span p

容器可以包裹其他的html元素被包裹起来的内容就形成了一个组

可以对这一组的内容统一进行样式的设置和结构的调整

块级元素: 默认情况下独占一行 <div> <p> <hr/> <h1>~<h6>....
行内元素: 多个行内元素可以处在同一行 <span> <font> <input>  <em> <strong>....
2.CSS概述
CSS: 层叠样式表 可以对html页面进行美化的操作 可以实现将展示数据的html代码和定义样式的css代码进行分离 增强了网页的展示能力

3.如在html中引入css
(1) 通过标签上的style属性来引入css
可以通过标签上的通用的属性 -- style来为当前标签设置样式
<div style="background-color: #999999; color:red;font-size: 40px;">
这是一个div
</div>
这种方式适合为个别的标签设置样式, 但是不推荐在页面中大量使用 会造成页面结构的混乱 不利于后期的维护

(2) 通过style标签来引入css
通过在<head>标签下的<style type="text/css"></style>标签的内部可以书写css代码
可以将css代码集中统一管理 可以初步的实现样式代码和展示内容的代码的分离

(3) 通过引入的方式
通过在<head>标签下的<link rel="stylesheet" href="demo1.css"/>来引入外部的css文件的内容
可以将css代码集中在一个文件中统一管理 真正的实现样式代码和展示内容的代码的分离

(4) 通过import引入css
通过@import url("xxx.css") 在css文件的内部来引入另一个css文件的内容 可以实现代码的复用

4.基本选择器
所谓的选择器指的是能够帮助我们在html中选中我们想要修饰的标签
(1) 标签名选择器
通过标签的名字来选中指定名称的标签进行样式的设置
格式: 标签名{...}

(2) 类选择器
通过标签上的通用的属性 -- class为每一个标签来指定所属的类, 那么具有相同class的标签则为一类, 可以为这一类的标签统一的设置样式
格式: .类名{...}

(3) id选择器
通过标签上的通用的属性 -- id, id特点是在整个html中是独一无二的, 可以通过id值来唯一的选中一个标签
格式: #id{...}

5.扩展选择器
在基本选择器选择的基础上进行更加复杂选择的选择器
(1) 后代选择器
在父选择器选择的元素内部 选中所有的子孙元素 进行样式的设置
格式: 父选择器 子孙元素选择器{...}

(2) 子元素选择器
在父选择器选择的元素内部 选中所有的子元素 进行样式的设置
格式: 父选择器>子元素选择器{...}

(3) 分组选择器
为多个选择器选中的元素统一的进行样式的设置
格式: 选择器1, 选择器2, ...选择器n{...}

(4) 属性选择器
选中指定属性的元素
选择器[属性....]{...}

(5) 相邻兄弟选择器
如果两个元素具有相同的父元素, 并且元素是相邻的, 那么这两个元素就是相邻兄弟元素
可以利用相邻兄弟选择器选中A元素后的B元素
格式: 大哥+小弟{...}

(6) 伪元素选择器
伪元素选择器选中的不是某一个元素, 选中是某一元素的指定状态
:link 元素未被点击时的状态
:hover 光标移入元素时的状态
:active 元素被点击时的状态
:visited 元素被点击后的状态

格式: 选择器:状态{}

id选择器>类选择器>标签名选择器

6.盒子模型

在css中所有的html元素都可以看成是一个框(盒子) 这些框都可以具有内边距边框和外边距, 这些值的设置可能会影响元素与元素之间的位置关系和元素本身的样式

外边距
margin: 10px 20px 30px 40px;/* 上 右 下 左 */
margin: 10px 20px 30px;/* 上 右左 下 */
margin: 10px 20px;/* 上下  左右 */
margin: 10px;/* 上下左右 */

上下外边距的合
b460
并: 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

边框
border:15px solid blue;
border-top: 15px solid green;
border-width: 20;
border-style: double;
border-color: black;

内边距
padding: 10px 20px 30px 40px;/* 上 右 下 左*/
padding: 10px 20px 30px;/* 上 右左 下 */
padding: 10px 20px;/* 上下  左右*/
padding: 10px;/* 上下左右*/

元素类型的补充:
块级元素:
默认情况下独占一行
可以为块级元素设置宽高 如果没有设置宽高 高由元素的内容决定 -- 将会由内容撑起来 宽会自动填满父元素(会跟随父元素)
如果设置了宽和高 就是你设置的宽高
为块级元素设置的 内边距 边框 和 外边距都会起作用

行内元素:
默认情况下多个行内元素可以处在同一行
不可以为行内元素设置宽高 宽和高由元素的内容决定
为行内元素设置的内边距 边框 和左右外边距都会起作用
设置的上下外边距将不会起作用

7.页面的布局方式

(1) 文档流式布局
这种布局方式是按照html中元素的声明顺序, 从上到下从左到右依次进行排列, 在排列的过程中会根据元素的外边距来保持元素之间的距离

这种布局方式是html中元素的默认布局方式 也是最常用的布局方式

(2) 浮动布局

float: left/right

如果将一个元素设置为浮动布局这种布局方式元素会脱离文档流, 按照指定的方向进行移动, 直到移动到紧挨着父边框或者是相邻的浮动元素的边框为止

浮动后的元素, 不管之前是块级元素还是行内元素, 浮动后都会变成inline-block类型, 即可以具备行内元素的特点(可以同行显示), 又具备块级元素的特点(即可以设置宽高)
清除浮动:
clear: left / right /both 用来设置元素的左边 / 右边 /两边都不能有浮动元素

(3) 定位布局

position: relative / absolute

不管是相对定位还是绝对定位, 元素在定位后会首先保持在原来的位置不动

相对定位(relative):

基于谁定位?

如果将一个元素设置为相对定位, 可以将元素基于初始的位置(原位置)进行定位(移动)

如何定位(移动)?
可以通过 top left right bottom来基于元素的原位置进行移动(这四个属性只对定位的元素起作用)

定位后的影响?
相对定位后的元素不会脱离文档流 在原位置还占用空间 原位置不会被其他元素所占用

由于定位后的元素位置发生了改变 可能会覆盖其他的元素 可以通过 z-index属性来设置元素的显示顺序, z-index值大的元素会显示在上面(z-index属性只对相对定位和绝对定位后的元素起作用)

绝对定位(absolute):

基于谁定位?

如果将一个元素设置为绝对定位, 可以将元素基于最近的已定位的祖先元素进行定位如果没有最近的已定位的祖先元素, 元素将会基于页面的边框(body)进行定位

如何定位(移动)?
可以通过 top left right bottom来基于元素的原位置进行移动(这四个属性只对定位的元素起作用)

定位后的影响?
绝对定位后的元素会脱离文档流, 在原位置不再占用空间, 原位置会被其他元素所占用

由于定位后的元素位置发生了改变 可能会覆盖其他的元素 可以通过 z-index属性来设置元素的显示顺序, z-index值大的元素会显示在上面(z-index属性只对相对定位和绝对定位后的元素起作用)

总结: 定位布局的元素使用于摆放位置没有太大规律的元素, 这时可以将元素的父元素设置为相对定位, 将元素设置为绝对定位, 可以通过top left right bottom按照坐标的方式来任意的摆放元素的位置

8.其他的css属性
(1)display -- 设置或检索对象是否及如何显示
block -- 块级元素的默认值
inline -- 行内元素的默认值
inline-block 既具备行内元素的特性(可以同行显示) 也具备块级元素的特性(可以设置宽高)
none 隐藏元素 这种隐藏是真的隐藏 隐藏后元素就真的不存在了
visibility: hidden 也可以用来隐藏元素 但是这种隐藏只是元素不显示了 并没有真的隐藏 在原位置还占用空间

(2) text-align 设置或检索对象中文本的对齐方式。
left  :　 默认值。左对齐
right  :　 右对齐
center  :　 居中对齐
justify  :　 两端对齐

(3)  vertical-align 设置或检索对象内容的垂直对其方式。
取值:
top 是指元素与行内最高元素的top对齐
middle 是指元素的中线与行的基线对齐
bottom 是指元素的底线与行的bottom对齐
baseline 默认值 指元素与行的基线对齐

(4)font
font-size
font-weight
font-family
font-style
line-height
行高。即字体最底端与字体内部顶端之间的距离。

(5) background
background-color
background-image
background-position
background-repeat
(6) height width

(7) list-style-tyle: none

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航