一、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样式表分类、选择器、样式属性的更多相关文章

  1. css——样式表分类，选择器

    一,样式表分类 (1)内联样式[优先级最高][常用][代码重复使用性最差] (当特殊的样式需要应用到个别元素时,就可以使用内联样式. 使用内联样式的方法是在相关的标签中使用样式属性.样式属性可以包含任 ...

  2. css样式表---样式表分类、选择器

    一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; bo ...

  3. CSS：CSS样式表及选择器优先级总结

    我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式.内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢? 也会遇到这样的情况,在样式表中,对同一个HTML元素,我们有可能既用到了 ...

  4. CSS样式----图文详解：css样式表和选择器

    主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...

  5. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  6. CSS样式----css样式表和选择器（图文详解）

    本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...

  7. css样式表--样式表分类

    样式表分类 1.内联式.写在body里.控制精确,可重复性差. <body> <div style="color:#90F">更好发挥的返回结果还 < ...

  8. css 03-CSS样式表和选择器

    03-CSS样式表和选择器 #本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几 ...

  9. css样式表的选择器与分类

    css 样式表的作用: 主要用于结构,样式与行为,CSS主要的作用就是美化网页的一个语言,它的特点: 1.结构与样式分离的方式,便于后期维护与改版; 2.样式定义精确到像素的级别; css样式表的结构 ...

随机推荐

  1. JDBC相关概念介绍

    一.JDBC相关概念介绍 1.1.数据库驱动 这里的驱动的概念和平时听到的那种驱动的概念是一样的,比如平时购买的声卡,网卡直接插到计算机上面是不能用的,必须要安装相应的驱动程序之后才能够使用声卡和网卡 ...

  2. Winfrom Chart实现数据统计

    简介 Chart图标根据实际使用情况,部分图表适用于多组数据的数据分析统计功能,例如柱状图:部分图表适用于单组数据的数据分析统计,例如饼状图. 主要属性 注意使用: Chart图表的如下属性:Lege ...

  3. 用Matlab进行部分分式展开

    [r p k]=residue[num,den] 例如H(s)=(2s3+5s2+3s+6)/(s3+6s2+11s+6) num=[2 5 3 6]; den=[1 6 11 6]; [r p k] ...

  4. C++STL中的unique函数解析

    一.总述 unique函数属于STL中比较常用函数,它的功能是元素去重.即”删除”序列中所有相邻的重复元素(只保留一个).此处的删除,并不是真的删除,而是指重复元素的位置被不重复的元素给占领了(详细情 ...

  5. C/C++基础---算法概览

    符号概念 beg和end表示元素范围的迭代器 beg2表示第二个序列开始位置迭代器,end2表示第二个序列末尾迭代器(如果有).如没有则假定系列2至少与beg end表示的范围一样大.beg和beg2 ...

  6. Android开发之环境配置篇

    Android环境配置: 一.JDK(不用安装) 1.拷贝 D:\Java\jdk1.8.0_91 文件内容 2. 安卓ADT ADT(Android Development Tools):安装ADT ...

  7. Hadoop概念学习系列之关于hadoop-2.2.0和hadoop2.6.0的winutils.exe、hadoop.dll版本混用（易出错）（四十三）

    问题详情是 2016-12-10 23:24:13,317 INFO [org.apache.hadoop.metrics.jvm.JvmMetrics] - Initializing JVM Met ...

  8. 服务容错保护断路器Hystrix之一：入门示例介绍（springcloud引入Hystrix的两种方式）

    限流知识<高可用服务设计之二:Rate limiting 限流与降级> 在微服务架构中,我们将系统拆分成了一个个的服务单元,各单元间通过服务注册与订阅的方式互相依赖.由于每个单元都在不同的 ...

  9. 面试总结之人工智能AI（Artificial Intelligence）/ 机器学习（Machine Learning）

    刚面完 AI 岗,这几点分享给你!- AI科技大本营 https://mp.weixin.qq.com/s/05G5HKSkZwhwnmskijToLQ 1.训练决策树时的参数是什么? 2.在决策树的 ...

  10. ARM Cortex-A9 (tiny 4412)

    要求 移植linux增加系统调用并烧写至开发板 详细步骤 一.搭建linux编译环境 1.GCC 编译器的安装: tar xzvf arm-linux-gcc-4.5.1-v6-vfp-2012030 ...