【2017-03-24】CSS样式表
CSS样式表:层叠式样式表
一、样式表的分类
1、内联式
写在标记的属性位置,优先级最高,重用性最差。
格式:
<div style="width:100px;height:100px;background-color:red;border:1px solid black">这里是内容</div>
2、内嵌式
<style></style>写在head里面,优先级第二,重用性一般
格式:
<style type="text/css">
.div1{
width:100px;
height:100px;
background-color:red;
border:1px solid black
}
</style>
<div class="div1"></div>
3、外部式
写在一个单独的以css结尾的文件中,通过引用来建立文件与html文件的关系,优先级最低,重用性最好,推荐使用
在css文件中的格式:
.div1{
width=100px;
height=100px;
background-color:red;
border:1px solid black;
}
在html中调用该格式:将css文件拖到html的<head></head>中
或者在<head></head>中输入代码:<link href="css文件的路径" rel="stylesheet" />
二、选择器
1、id选择器
优先级第一,只能选中一个元素。
#ddd1{
background-color:pink;
}
2、class选择器
优先级第二,可以选中一堆元素。
.div1{
background-color:blue;
}
3、标签选择器
以标签名进行选择 div span 优先级最低,能选中一堆元素,不建议使用
div{
background-color:blue;
}
4、符合选择器
(1)逗号并列
.div1,.div2,#ddd1{
background-color:green;
}
(2)空格后代
.div1 .span1{
font-size:16px;
}
三、样式
1、大小
width:200px; 宽
height:300px; 高
2、背景
background-color:red/#303030/rgb(255,255,255); 背景色
background-image:url(图片路径); 背景图片
background-repeat: 背景图片平铺方式
background-postion: 背景图片位置
background-size: 背景图片大小
background-attachment:fixed 背景图片是否滚动(fixed背景图锁定)
3、字体
font-family: 字体类型
font-size: 12px;/14px; 字体大小
font-style:italic 倾斜
font-weight:bold 加粗
text-decoration:underline下划线 overline上划线 line-through删除线 none 没有,用来去掉超链接的下划线
color: 字体颜色
4、对齐方式(控制文字在一个div中的布局方式)
text-align:center 水平对齐方式(center水平居中)
vertical-align:middle 垂直对齐方式(middle垂直居中) 但必须配合display:table-cell;使用
line-height:22px; 行高,按像素调
text-indent:30px; 缩进单位,按像素调节
5、边界边框
margin:50px 100px 60px 70px; 外边距 上右下左顺时针顺序
以浏览器左上角为基点若只设置一个px值,则是四个方位的外边距都是设置的这一个值。
若填两个值例如 50px 30px 则是上下外边距是50个像素,左右外边距是30个像素。
padding: 内边距 上右下左顺时针顺序 增加内边距属性,该元素会相应的变大
border:1px(边框粗细) solid(边框实线) black(边框颜色) 边框
6、列表方块
list-style: none将列表前面的序号去掉
list-style-image:url(图片路径) 可以将前面的序号变为图片
7、格式与布局
1、位置
(1)postion:
<1>、fixed固定 将一个元素锁定在一个位置。相对于浏览器边框位置固定
<2>、absolute绝对位置 postion:absolute绝对定位,一出现绝对定位则该元素浮动。多了top/bottom/left/right四个属性。一旦浮动起来,该元素要找一个相对定位来进行定位。要想使他在他父级里定位,要在他父级中加postion:relative;
相对于父级元素(浏览器,绝对定位的上级)
<3>、relative相对位置 postion:relative相对定位,多了top/bottom/left/right四个属性 相对于自身应该出现的位置
(2)top:距离上边的距离
(3)right:距离右边的距离
(4)bottom:距离下边的距离
(5)left:距离左边的距离
2、流
float:left;/right; 流式布局
clear:both; 清流
清楚流式布局用法:
在需要清楚流式布局的位置打上一行代码:<div style="clear:both;"></div>
3、z-index分层
值越大越靠上
8、其他
display:block;/none; 显示block和隐藏none,不占位置
visibility:hidden;/visible; 显示visible和隐藏hidden,占位置
overflow:hidden;/scroll; 超出范围隐藏/超出范围加滚动条
透明:opacity:0.5;-moz-opacity:0.5;filter:alpha(opacity=50)
圆角:border-radius:5px;
阴影:box-shadow:0 0 5px black;
【2017-03-24】CSS样式表的更多相关文章
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- WEB入门 四 CSS样式表深入
学习内容 Ø CSS选择器深入学习 Ø CSS继承 Ø CSS文本效果 Ø CSS图片效果 能力目标 Ø 掌握CSS选择器的组合声 ...
- 当css样式表遇到层
(附:White-space:pre可以是样式表里卖弄body的属性,作用是保持html源代码的空格与换行,等同<pre>标签.) Css样式表可以通过被封在层里的方式来限制页面所修饰的内 ...
- 深度理解CSS样式表,内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
- HTML基础(三)——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- DOM与CSS样式表
在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
随机推荐
- 时间处理之strtotime
strtotime (PHP 4, PHP 5, PHP 7)strtotime - 将任何英文文本的日期时间描述解析为 Unix 时间戳说明 int strtotime ( string $time ...
- PHP 数组处理
一:PHP 定义数组: PHP 代码 不能再 空的位置 打字 会报错 定义数组 方式1 $cars=array("Volvo","BMW","T ...
- 【吐血整理】SVN命令行,Subversion的正确使用姿势,让版本控制更简单~
一.写在前面 前面一直博主一直用svn的桌面版本,但看项目经理一直都用的命令行方式,不为性能,还能直接装逼呀!在这里先感谢赵哥,也把它分享给感兴趣的你们~ 二.直接上干货 1. svn checkou ...
- Array方法归类总结
数组的转换方法 valueOf()方法,数组调用该方法后返回的还是原来的数组. toString()方法,数组调用该方法后会调用每一项的toStirng()方法,之后将每一项拼接成一个以逗号分割的字符 ...
- UE4中的单映射:TMap容器
一.TMap<T>是么 TMap<T>是UE4中的一种关联容器,每个键都关联着一个值,形成了单映射关系.因此你可以通过键名来快速查找到值.此外,单映射要求每个键都是唯一的.类似 ...
- linux下php开发环境搭建(nginx+php+mysql)
安装前准备工作 先安装一些必要的类库 yum install -y wget zlib-devel bzip2-devel curl-devel openssl openssl-devel vim ...
- js文字滚动效果实现
纯js实现,完整代码如下: <!doctype html> <html lang="en"> <head> <meta http-equi ...
- iOS使用StroryBoard页面跳转及传值
之前在网上iOS的页面跳转大多都是按回以前的那种xib的形式,但鄙人是使用storyboard的.这篇就只介绍利用storyboard进行页面跳转与传值. 新建页面 iOS的程序也是使用了MVC的思想 ...
- ubuntu14.04 + OpenCV2.4.9 配置方法
1. 安装openCV 所需依赖库或软件: sudo apt-get install build-essential cmake libgtk2.0-dev pkg-config python-de ...
- C#计算表达式(仿计算器功能)
一.用MSScriptControl在C#中执行JavaScript代码javascript中有个eval方法用过的人都知道他的方便和强大之处.在C#中,我们也可以通过Com组件来执行一段javasc ...