【3-24】css样式表分类、选择器、样式属性
一、css样式表分类：
（一）内嵌样式表：代码写在标签内的样式表 控制精确 代码重用性差 优先级最高
格式：<p style="样式属性">内容</p>
<div style="text-decoration:line-through;">第四格第三元</div>
（二）内联样式表：将代码写在标签<style type="text/css"></style>之间,此标签一般写在head之中
内联样式表 代码重用性好 没有内嵌精确 优先级第二
格式：<style type="text/css">
.组名{样式属性}
</style>
（三）外联样式表：把css写在单独的文件中，后缀名以.css命名
在<head>内用<link>标签连接
格式：<link href="相对路径" rel="stylesheet">
.div1 {
width:100px;
height:150px;
background-color:red;
}
<link href="3-23练习.css" rel="stylesheet" />
二、选择器
1、class选择器
格式：
.class名
{
属性名: 属性值;
….}
2、ID选择器
格式：
#id名
{
属性名: 属性值;
….}
3、标签选择器
格式：
某个html标签{
属性名:属性值;
…}
4、复合选择器
（1）并列复合：多选择器名 并用“，”隔开，适用于不同标签并列
例：
.div3,.a1{
width:400px;
height:200px;
border:1px dashed black;
}
（2）后代复合：使用空格隔开，适用于同一标签不同级别
例：
.div1 .b1 {
width:800px;
height:initial;
font-size:5px;
font-style:italic;
font-family:华文行楷;
font-weight:bold;
border: 1px solid black;
}
三、样式属性
（一）格局大小：
width：宽；
height:高；
（二）背景属性： (background)
色彩 ：background-color: ;
图片 ：background-image: url(相对路径 );
平铺方式 ：background-repeat: no-repeat;
滚动 ：background-attachment: fixed;(固定) scroll;(滚动)
图片大小：background-size:像素；
位置 ：background-position: left;(水平) top(垂直);
（三）字体属性：(font)
大小 ：font-size: 像素px;
颜色：color: ;
字体：font-family: ;
样式 :font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)
粗细 :font-weight: bold;(粗体) lighter;(细体) normal;(正常)
修饰 :text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)
变体 :font-variant: small-caps;(小型大写字母) normal;(正常)
大小写 :text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)
常用字体： (font-family)
（四）对齐对齐
对齐 ：text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)
垂直对齐 ：vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;
（需配合display:table-cell;使用）
缩进 ：text-indent: 数值px;
行高 :line-height: normal;(正常)
词间距word-spacing: normal; 数值
空格white-space: pre;(保留) nowrap;(不换行)
显示 ：display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)
（五）边界边框
外边界：margin:;顺序：上右下左
内边界：padding:;
边框格式：border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
边框宽度：border-width:;
边框颜色：border-color:#;
和写边框：border： border-width border-style border-color;
内边框：box-sizing:box-border;
（六）列表方块
序号图像：list-style-image: url(..);
有无列表序号：list-style：none;
类型：list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;
位置：list-style-position: outside;(外) inside;
（七）其他常用属性
（1）display:none;--隐藏，不保留位置
visibility:hidden;--隐藏，保留位置
overfllow:scoll;--滚动条
透明：optacity:(0-1);
-moz-opacity:(0-1);
filter:alpha(opacity=0-100);
圆角：border-radius：像素；
阴影：box-shadow:像素（左右偏移）像素（上下偏移）像素（扩散度）
补充留用：
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
鼠标光标样式：
链接手指 cursor：point
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}
【3-24】css样式表分类、选择器、样式属性的更多相关文章
- css——样式表分类，选择器
一,样式表分类 (1)内联样式[优先级最高][常用][代码重复使用性最差] (当特殊的样式需要应用到个别元素时,就可以使用内联样式. 使用内联样式的方法是在相关的标签中使用样式属性.样式属性可以包含任 ...
- css样式表---样式表分类、选择器
一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; bo ...
- CSS：CSS样式表及选择器优先级总结
我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...
- CSS样式----图文详解：css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
- css样式表中四种属性选择器
学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...
- CSS样式----css样式表和选择器（图文详解）
本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...
- css样式表--样式表分类
样式表分类 1.内联式.写在body里.控制精确,可重复性差. <body> <div style="color:#90F">更好发挥的返回结果还 < ...
- css 03-CSS样式表和选择器
03-CSS样式表和选择器 #本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几 ...
- css样式表的选择器与分类
css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构 ...
随机推荐
- Docker Dockerfile 一
1.概述 创建Docker镜像的方式有三种 docker commit命令:由容器生成镜像: Dockerfile文件+docker build命令: 从本地文件系统导入:OpenVZ的模板. 关于这 ...
- 【Graphite学习】系列学习文章-【转】
Graphite 系列 #2:Carbon 和 Whisper GRAPHITE SERIES #1: PROVISION HARDWARE GRAPHITE SERIES #2: CARBON &a ...
- Dubbo(2)发布Dubbo服务
主要参考Dubbo源码包里面的dubbo-demo源码: 1.项目结构: 2.pom.xml中的依赖: <project xmlns="http://maven.apache.org/ ...
- JVM异常之：栈溢出StackOverflowError
在java虚拟机规范中,虚拟机栈和本地方法栈都会出现StackOverflowError和OutofMemoryError,程序计数器是java虚拟机中唯一一块不会产生error的内存区域. 一.St ...
- [转][html]radio 获取选中状态
方法一: if ($("#checkbox-id").get(0).checked) { // do something } 方法二: if($('#checkbox-id').i ...
- 将OpenVZ系统硬盘从200G升级到400G
平时习惯性动作df了一下,结果发现...... ‘ 200G的磁盘空间快满了(99%),只剩下2G多了. 索性一下加到400G空间 目前为止很顺利. 但是OpenVZ这台需要关机再开机才行. 重新开机 ...
- css属性—position的使用与页面的分层介绍
一.引言: 在css众多属性中,position算是里面用的比较多也相对来说比较重要的属性了,它对于单个标签的“定位”.标签之间的“相对位置定位”还有网页的分层来说十分重要! 二.“定位的实现”具体介 ...
- Zabbix配置参数优化
概述:使用zabbix监控服务器已有一段时间,监控的服务器不到100台,发现刷新zabbix页面有卡顿的现象.而且经常报“Zabbix poller processes more than 75% b ...
- 逻辑运算符&逻辑短路
(1)and 逻辑与 全真则真,一假则假 print(True and True) #True print(False and True) #False print(False and False) ...
- springmvc+mybatis+redis的session共享+maven管理
负载均衡搭建:http://www.cnblogs.com/guoyansi19900907/p/8717746.html redis安装:http://www.cnblogs.com/guoyans ...