一、样式表

（一）样式表的分类

1.内联样式表

　　和HTML联合显示，控制精确，但是可重用性差，冗余较多。

　　例：<p style="font-size:14px;">内联样式表</p>

2.内嵌样式表

　　作为一个独立区域内嵌在网页里，必须写在head标签里面。

　　<style type="text/css">

　　p   //格式对p标签起作用

　　{

　　样式；

　　}

　　</style>

3.外部样式表

　　新建一个CSS文件，用来放置样式表。如果要在HTML文件中调用样式表，需要在HTML文件中点右键→CSS样式表→附加样式表。一般用link连接方式。

　　有些标签有默认的边距，一般写样式表代码的时候都会先去除（也可以设置其他的样式），如下：

选择器

，标签选择器。用标签名做选择器
<style type="text/css">
p{
样式
}
</style>

,class选择器。都是“.”开头
<head>
<style type="text/css">
.main{
height:42px;
width:100%;
text-align:center;
}

</style>
</head>
<body>
<div class="main"> <!--调用class样式-->
</div>
</body>

3,ID选择器 以“#”开头
<div id="样式名">
<head>
<style type="text/css">
#main /*定义样式*/
{
heitht：42px；
width：100%；
text-align：center；
}
</style>
</head>
<body>

<div id="main"> <!--调用id样式-->
</div>
</body>

,复合选择器
①用“，”隔开，表示并列。
<style type="text/css">
p,span /*标签p、span两者同样的样式*/
{
样式
}
</style>
②用空格隔开，表示后代。
<style type="text/css">
.main p /*找到使用样式“main”的标签，在该标签里的p标签使用该样式*/
{
样式；
}
</style>
③筛选“.”
<style type="text/css">
p.sp /*在标签p中的class=“sp”的标签，执行以下样式，类似于并列？ 或者独立设 置一个sp标签*/
{
z样式；
}
</style>

二、样式属性

1,背景
background-color:#foo;　　　　　　　　  背景色，样式表优先级高
background-image:url(); 　　　　　　　   设置背景图片（默认）
background-attachment:fixed; 　　　　   背景是固定的，不随字体滚动
background-attachment:scroll; 　　　　  背景随字体滚动
background-repeat:no-repeat; no repeat不平铺；repeat-x横向平铺；
background-position：center; 　　　　    背景图片居中，设置背景图片时，repeat 必须为no-repeat
background-position：right top; 　　　　背景图放置在右上角
background-position：left 100px top 200px; 离左边100px，离上边200px

2，前景字体：
font-family:"微软雅黑"； 　　 设置字体
font-size：12px； 　　　　  设置字体大小
font-weight：bold； 　　　  bold是加粗，normal是正常
font-style：italic； 　　　　 倾斜，normal是正常
color:#F00; 　　　　　　    设置文字颜色
text-decoration:underline; 下划线 overline line-through删除线 none无
text-align：center； 　　　 水平居中对齐；left左对齐；right右对齐；
vertical-align：middle； 　  垂直居中对齐；top是顶端对齐 bottom底部对齐
text-indent：28px； 　　  首行缩进量
line-height：24px； 　　  行高。一般为1.5-2倍字体大小
display:none; 　　　　    none是不显示；
inline-block　　　　　　  显示为块，不自动换行，宽高可设；
block　　　　　　　　　　显示为块，自动换行
inline　　　　　　　　　　效果同span标签，不自动换行，宽高不可设
visibility：hidden；　　 可视性，hidden隐藏但是占用空间；visible显示

3，边界和边框
border（表格边框、样式等）、margin（表外间距）。padding（内容与单元格间距）

border:5px solid blue; 四边框：5像素宽、实线、蓝色（相当于以下的三行语句）
border-width：5px；
border-style：solid；
border-color：blue；
border-top：5px solid blue 　　 上边框：5像素宽、实线、蓝色
border-bottom：5px solid blue 下边框：5像素宽、实线、蓝色
border-left：5px solid blue　　 左边框：5像素宽、实线、蓝色
border-right：5px solid blue 　右边框：5像素宽、实线、蓝色

margin：10px；　　　　四边外边框宽度为10像素，auto，居中
margin-top:10px; 　　上边外边框宽度为10像素；其他三边边框类似
margin：20px 0px 20px 0px；

padding：10px； 　　内容与边框的四边间距为10像素
padding-top：10px； 内容与边框的上间距为10像素；与其他三遍间距类似
padding：20px 0px 20px 0px

4，列表与方块
width、height、（top、bottom、left、right）只有在绝对坐标情况下才有用。

list-style：none； 　　 取消序号
list-style:circle; 　　   序号变为圆圈，相当于无序
list-style-image：url（图片地址）； 图片做序号
list-style-position：outside； 序号在内容外面
list-style-position：inside；序号跟内容在一起

链接的style：

a: link 超链接被点前状态
a:visited 超链接点击后状态
a:hover 悬停在超链接时
a:active 点击超链接时

2016/2/19 css样式表 Cascading Style Sheet 叠层样式表 美化HTML网页的更多相关文章

  1. CSS（Cascading Style Sheet，叠层样式表），作用是美化HTML网页。

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  2. CSS（Cascading Style Sheet）简述

    CSS(Cascading Style Sheet)简述 什么是CSS? css是指层叠样式表 css定义了如何显示HTML元素 css的诞生是为了解决内容与表现分离的问题,可以极大地提高工作效率 样 ...

  3. css Cascading Style Sheet 层叠样式表

    作用 :实现网页布局,美化页面元素 CSS 在文档中的三种方式 1 行内样式/内联样式 特点:在具体的html标签中引入css 代码 语法: 所有的html标签都具有一个style属性,属性值就可以使 ...

  4. CSS(Cascading Style Shee)

    1.CSS是Cascading Style Sheet这个几个英文单词的缩写,翻译成中文是“层叠样式表”的意思 CSS能让网页制作者有效的定制.改善网页的效果. CSS是对HTML的补充,网页设计师曾 ...

  5. HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  6. 00Cascading Style Sheet

    Cascading Style Sheet CSS(Cascading Style Sheet)即层叠样式表,简称样式表.要理解层叠样式表的概念先要理解样式的概念.样式就是对网页中的 元素(字体.段落 ...

  7. CSS层叠样式表(Cascading Style sheets)

    CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...

  8. 深入理解 CSS（Cascading Style Sheets）中的层叠（Cascading）

    标题中的 Cascading 亦可以理解为级联. 进入正文,这是一个很有意思的现象.可以直接跳到 总结一下 部分,看完再回过头来阅读本文. 引子 假设我们有如下结构: <p class=&quo ...

  9. CSS( Cascading Style Sheets )简书

    (注:带*号的属性是CSS3新增属性)一.基本规则1.css通常存储在样式表(style)中,用于定义如何显示HTML元素:2.css主要由两个部分构成:选择器和一条或多条声明. 选择器通常是需要改变 ...

随机推荐

  1. BZOJ 3326 [SCOI2013]数数 (数位DP)

    洛谷传送门 题目: Fish 是一条生活在海里的鱼,有一天他很无聊,就开始数数玩.他数数玩的具体规则是: 确定数数的进制$B$ 确定一个数数的区间$[L, R]$ 对于$[L, R] $间的每一个数, ...

  2. HDU4415 Assassin’s Creed

    题目大意:有n个人,每个人有x,y两个值.x代表干掉他得到的分数,分数和不超过m;y代表干掉他后你能额外干掉多少个,且不计入总分. 求干掉人数最多为多少,以及最小的分. ~~~~~~~~~~~~~~~ ...

  3. luogu4388 付公主的矩形

    题面: 为了排解心中的怒气,她造了大量的稻草人来发泄.每天付公主都会把一些稻草人摆成一个R∗C的矩形,矩形的每个方格上都有一个稻草人.然后她站在这个矩形的左上角,向矩形的右下角射箭.付公主的箭术过人, ...

  4. php扩展1：filp/whoops（用于调试，方便定位错误点）

    一.composer下载filp/whoops: 1.在composer.json中添加:"filp/whoops": "*",如下所示: 2.执行compos ...

  5. css布局的各种FC简单介绍：BFC，IFC，GFC，FFC

    什么是FC? Formatting Context,格式化上下文,指页面中一个渲染区域,拥有一套渲染规则,它决定了其子元素如何定位,以及与其他元素的相互关系和作用. BFC 什么是BFC Block ...

  6. python3.6的requests库&HTMLTestRunner实现测试报告

    '''1. 在suite.addTest时,可以把需要的用例先写入一个列表list中,list当做addTest的参数:2. 在unittest.main(verbosity=2)中,默认为1,设置为 ...

  7. MySQL-----操作练习

    一.表关系 请创建如下表,并创建相关约束 二.操作表 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: select A.student_id from (select ...

  8. Python之面向对象继承和派生

    Python之面向对象继承和派生 什么是继承: 继承是一种创建新的类的方法.在Python中,新建的类可以继承自一个或多个父类.原始类称为基类或超类. 新建的类称为派生类或子类. Python中类的继 ...

  9. linux下的文档处理及tar命令

    1.使用cat命令进行纵向合并 使用‘>’是将左边的内容覆盖到右边 使用‘>>’是将左边的内容追加到右边文档中 还可使用‘>’将不同文件进行合并 2.管道符‘|’统计行数 使用 ...

  10. UVa 11998 破碎的键盘（数组实现链表）

    题意: 输入一行字符,其中包含'[' 和 ‘]’, 意思为键盘上的home 和 end 键, 然后模拟字符在键盘上输入. 输入一行最终的结果 分析: 用数组模拟一个链表, 在链表的头尾插入字母然后输出 ...