CSS 样式
什么是 css
层叠样式表 (Cascading Style Sheets), 是一种用来表现 html(标准通用标记语言的一个应用) 或 XML(标准通用标记语言的一个子集)等文件样式的计算机语言. CSS 不仅可以静态地修饰网页, 还可以配合各种脚本语言动态地对网页各元素进行格式化, 调整颜色, 背景, 文字风格
css 的声明
css 属性和值用冒号分隔, 每条样式末尾加分号,
例: color:red;
通配符:* 应用到所有的元素, 除<!doctype > 以外
元素选择器: 给某类元素标签统一应用样式
例 p 元素: p{color:red}
class 选择器: 将元素归成一类, 对一类元素应用样式
例:.test{color:red}
id 选择器: 给元素设定一个唯一的标识符, 仅单独对一个元素应用样式, 通常用于 js 获取元素
例:#test{color:red}
权重: id 选择器 > class 选择器>元素选择器
应用方式
1. 内联样式
直接在标签元素中定义, 添加属性和值
<p style="color: blue;background: gray;"></p>
2. 当前页面内容应用样式
在头部内容中增加 style 样式内容
- <head>
- <style>
- p { color : green; background : gray;}
- </style>
- </head>
- <body>
- <p > 应用样式</p>
- </body>
3. 外联样式
通过 link 调用其他路径当中的. css 文件
<link href=""rel="stylesheet">
文本样式
描述 | 属性:值 |
---|---|
文本颜色 | color:red; |
背景颜色 | background:red; |
字符间距 | letter-spacing:2em; |
空格间距 (适用于英文) | word-spacing:10px; |
字行间距 | line-height:10px; |
对齐方式 | text-align:center/left/right; |
文本缩进 | text-indent:2em; |
注: 单文 em 是相对字体大小而定的, 属于相对单位
装饰文本(decoration):
值 | 描述
---|---
none | 无装饰
underline | 下划线
line-through | 中划线
overline | 上划线
注: a 标签默认添加下划线, 通过 text-decoration:none 取消掉
字体样式
属性 | 描述 |
---|---|
font-size | 字体大小 |
font-family | 字体类型 |
font-style | 字体风格 normal/italic(倾斜) |
font-weight | 100-300(细体),400-500(默认),600-900(粗体) |
背景属性
属性 | 描述 |
---|---|
background-color | 背景颜色 |
background-image:url() | 背景图片 |
background-repeat | 背景填充,repeat(默认平铺方式),no-repeat(不重复图像),repeat-x(以 x 方向重复平铺图像),repeat-y(以 y 方向平铺图像) |
background-postion | 背景定位(x,y 方向) |
background-size | 背景大小(cover:使图像 x 方向拉伸到最大最大尺寸) |
css 补充
三类元素
1. 块级元素
a. 前后的元素都会被换行, 允许设置宽高度
b. 浮动 (float), 定位(fixed,absolute) 不占空间的样式, 会变为 "块" (不能用 margin 进行居中)
2. 内联元素
a. 前后元素不会被换行
b. 不能设置宽度, 也没有垂直方向的外边距
3. 内联块
内联元素的块, 单用拥有了块的特质(不会被换行)
样式调整
- display:
- block(块元素)
- inline(内联元素)
- inline-block(内联块);
- text-align:center(居中文字, 内联元素, 内联块)
- margin:0 auto(居中块元素)
- vertical-align:top/middle/bottom(对块中内联元素进行调整)
- overflow
- value|desc
- ---|---
visible | 默认
hidden | 清除浮动样式, 隐藏块中内容溢出部分
auto | 内容溢出时, 显示右侧滚动条
scroll | 不管是否溢出, 都显示滚动条
阴影(立体效果)
- box/text-shadow:|1px|1px|1px|black
- ---|---|---|---|---
阴影 | 左右 | 上下 | 浓度 | 颜色
注: text-align:center 对 p 标签可以居中, 对 span 标签不能
圆角
- css| desc
- ---|---
border-radius|50% 以上, 正方形盒子为园, 长方形为椭圆
border-top-left-radius | 上左
border-top_right-radius | 上右
border-bottom-left-radius | 下左
border-bottom-right-radius | 下右
制作三角形
- .box {
- width: 0;
- height: 0;
- border-top: 5px solid red;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- }
css3 样式
直接选择对元素进行渲染, 不需要创建对象
- p:first-child{}
- p:last-child{}
- p:nth-child(){}
- css-float(浮动)
定义和用法
float 属性定义元素在哪个方向浮动. 以往这个属性总应用于图像, 使文本围绕在图像周围, 不过在 CSS 中, 任何元素都可以浮动. 浮动元素会生成一个块级框, 而不论它本身是何种元素
注: 假如在一行之上只有极少的空间可供浮动元素, 那么这个元素会跳至下一行, 这个过程会持续到某一行拥有足够的空间为止.
- value|desc
- ---|---
left | 向左浮动
right | 向右移动
none | 默认值, 元素不浮动
inherit | 继承父元素 float 的值
块元素浮动之后脱离文档流, 原来位置不占空间
上行块框浮动之后, 下行文字将围绕浮动框
清除浮动
1. 在浮动元素之后加上一个带有清除样式的盒子:
- <div class="clear"></div>
- .clear{clear:both;}
2. 在父级元素当中加上样式 overflow:hidden;
定位(position)
1. 相对定位(relative)
以自身位置作为参考进行移动
移动后, 原先位置保留, 不会有元素占据其位置
2. 绝对定位(absolute)
有父级定位时, 以父级定位作参考进行移动, 当没有时, 以浏览器作为参考
移动后, 不占据原来空间
3. 固定定位(fixed)
以浏览器做参考进行移动
不占据空间
4. 层级关系(z-index)
只允许调整定位的元素层级显示关系, 值越大越靠前, 值相同则覆盖显示
来源: http://www.bubuko.com/infodetail-2740713.html