一、样式表

（一）样式表的分类

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. 第1节 MapReduce入门：11、mapreduce程序的入门

    1.1.理解MapReduce思想 MapReduce思想在生活中处处可见.或多或少都曾接触过这种思想.MapReduce的思想核心是“分而治之”,适用于大量复杂的任务处理场景(大规模数据处理场景). ...

  2. android 获取application和activity下meta-data中的值

    meta-data在AndroidManifest中是以键值对的形式存在的,可以将meta-data放在application根节点下,也可以放在某个activity节点下.因为存放的位置不同,因此获 ...

  3. 洛谷——P2417 课程

    P2417 课程 裸地匈牙利算法, 贪心的不断匹配,若没匹配,则匹配:反之,判断与之匹配的点能否在找另一个点匹配,若能,抢多这个点与之匹配 时间复杂度$O(n\times m)$ #include&l ...

  4. 「 Luogu P1122 」 最大子树和

    # 题目大意 真讨厌题面写的老长老长的. 这个题的意思就是给定一棵无根树,每个节点都有一个美丽值(可能是负数),可以删掉一些边来删除某些点,现在要求你求出可以删掉任意条边的情况下,这个树上的剩余节点的 ...

  5. cookie和session的区别及session的生命周期

    这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择,都纪录 ...

  6. leetcode-88合并两个有序数组

    合并两个有序数组 思路:利用索引合并两个列表,排序.注意不需要返回值,只修改nums1 class Solution: def merge(self, nums1: List[int], m: int ...

  7. python——进制间的转换

    int(string_num, n)  string_num表示某种进制的字符串,n表示string_num是什么进制数 2.8.16 进制转为10进制:使用int()或者eval() 10 进制转为 ...

  8. python面向对象编程设计与开发

    一.什么是面向对象的程序设计 1.何为数据结构? 数据结构是指相互之间存在一种或多种特定关系的数据元素的集合,如列表.字典. 2.何为编程? 编程是指程序员用特定的语法+数据结构+算法,组成的代码,告 ...

  9. poj 3648 2-sat 输出任意一组解模板

    转载地址:http://blog.csdn.net/qq172108805/article/details/7603351 /* 2-sat问题,题意:有对情侣结婚,请来n-1对夫妇,算上他们自己共n ...

  10. Flask（4）：wtforms组件 & 数据库连接池 DBUtils

    wtforms 组件的作用: --- 生成 HTML 标签 --- form 表单验证 示例代码: app.py from flask import Flask, render_template, r ...