CSS 基础篇、绝对有你想要
2016-07-25 14:01
483 查看
本章内容:
简介
CSS 定义
四种引入方式
样式应用的顺序
选择器(Selector)
* 通用元素选择器
标签选择器
class 类选择器
# ID选择器
, 多元素选择器
后代元素选择器
> 子元素选择器
+ 毗邻元素选择器
[] 属性选择器
伪类选择器
常用属性
颜色属性(color 、transparent、opacity)
字体属性(font-style、 font-weight、font-size、 font-family、font)
文本属性(white-space、direction、text-align、line-height、vertical-align、text-indent、letter-spacing、word-spacing、 text-transform、text-overflow、text-decoration、text-shadow、word-wrap)
背景属性(background-color、background-image、background-position、background-repeat、background-attachment、background)
列表属性(list-style-type、list-style-image、list-style-position、list-style)
页面布局
边框(border-style、border-color、border-width、border-radius、border、box-shadow)
盒子模型(padding、margin)
display
visibility
float 浮动
clip 剪裁图像
overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容
position 规定元素的定位类型(static、relative、absolute、fixed)
z-index 元素层叠顺序
outline 边框轮廓
zoom 缩放比例
cursor 鼠标的类型形状(Crosshair、Pointer、Move、text、wait、help...)
transform、transition 动画效果
CSS 是什么?
CSS是Cascading Style Sheets的简称,中文称为层叠样式表。
属性和属性值用冒号隔开,以分号结尾。
CSS 四种引入方式:
1.行内式
行内式是在标签的style属性中设定CSS样式。
?
2.嵌入式
嵌入式是将CSS样式集中写在网页的<head>标签的<style></style>标签对中。
?
3.导入式
将一个独立的.css文件引入HTML文件中,导入式使用@import 引入外部CSS文件,<style>标记也是写在<head>标记中。
导入式会在整个网页装载完后再装载CSS文件。
?
4.链接式
将一个独立的.css文件引入到HTML文件中,使用<link>标记写在<head>标记中。
链接式会以网页文件主体装载前装载CSS文件。
?
样式应用顺序:
行内样式优先级最高
针对相同的样式属性,不同的样式属性将以合并的方式呈现
相同样式并且相同属性,呈现方式在<head>中的顺序决定,后面会覆盖前面属性
!important
指定样式规则应用最优先
?
上效果图代码
简介
CSS 定义
四种引入方式
样式应用的顺序
选择器(Selector)
* 通用元素选择器
标签选择器
class 类选择器
# ID选择器
, 多元素选择器
后代元素选择器
> 子元素选择器
+ 毗邻元素选择器
[] 属性选择器
伪类选择器
常用属性
颜色属性(color 、transparent、opacity)
字体属性(font-style、 font-weight、font-size、 font-family、font)
文本属性(white-space、direction、text-align、line-height、vertical-align、text-indent、letter-spacing、word-spacing、 text-transform、text-overflow、text-decoration、text-shadow、word-wrap)
背景属性(background-color、background-image、background-position、background-repeat、background-attachment、background)
列表属性(list-style-type、list-style-image、list-style-position、list-style)
页面布局
边框(border-style、border-color、border-width、border-radius、border、box-shadow)
盒子模型(padding、margin)
display
visibility
float 浮动
clip 剪裁图像
overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容
position 规定元素的定位类型(static、relative、absolute、fixed)
z-index 元素层叠顺序
outline 边框轮廓
zoom 缩放比例
cursor 鼠标的类型形状(Crosshair、Pointer、Move、text、wait、help...)
transform、transition 动画效果
简介 |
CSS是Cascading Style Sheets的简称,中文称为层叠样式表。
属性和属性值用冒号隔开,以分号结尾。
CSS 四种引入方式:
1.行内式
行内式是在标签的style属性中设定CSS样式。
?
嵌入式是将CSS样式集中写在网页的<head>标签的<style></style>标签对中。
?
将一个独立的.css文件引入HTML文件中,导入式使用@import 引入外部CSS文件,<style>标记也是写在<head>标记中。
导入式会在整个网页装载完后再装载CSS文件。
?
将一个独立的.css文件引入到HTML文件中,使用<link>标记写在<head>标记中。
链接式会以网页文件主体装载前装载CSS文件。
?
样式应用顺序:
行内样式优先级最高
针对相同的样式属性,不同的样式属性将以合并的方式呈现
相同样式并且相同属性,呈现方式在<head>中的顺序决定,后面会覆盖前面属性
!important
指定样式规则应用最优先
?
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>nick</title> <meta charset="utf-8" /> <style type="text/css"> .img-see-2016-7-2 { background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg"); background-size: 660px; background-repeat: no-repeat; height: 300px; width: 600px; transition-duration: 30s; transition-timing-function: ease; transition-property: background-size; } .img-see-2016-7-2:hover { background-size: 2000px; } </style> </head> <body> <div class="img-see-2016-7-2"></div> </body> </html>
上效果图代码
相关文章推荐
- css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
- CSS中的浮动清除
- 《CSS3权威指南》——笔记4(值和单位)
- css3动画应用-音乐唱片旋转播放特效
- 值得注意的CSS属性
- css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
- 原生JS中如何获取CSS属性中的值
- Div+CSS命名规范
- 《css权威指南》——笔记3(结构与层叠)
- CSS3-盒模型设计
- 设置inline-block布局造成的幺蛾子事
- CSS3 box-sizing 属性
- css实现动态进度条
- css实现百分比进度条
- HTML&CSS基础学习笔记1.17-表格的头部与尾部
- css实现鼠标放到图片旋转效果
- 自定义Dialog样式 虚拟键盘的隐藏 TextView的图标
- css3 如何实现圆边框的渐变
- CSS深入理解之margin
- 前端开发:css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。