一、样式表

（一）样式表的分类

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. JAVA基础——内存流

    掌握内存操作流 输入和输出都是从文件中来的,当然,也可将输出的位置设置在内存上,这就需要ByteArrayInputStream和ByteArrayOutputStream ByteArrayInpu ...

  2. Quartz任务调度2

    注意: 不同的版本的jar包,具体的操作不太相同,但是思路是相同的:比如1.8.6jar包中,JobDetail是个类,直接通过构造方法与Job类关联.SimpleTrigger和CornTrigge ...

  3. 懒癌晚期学图论的时候自己用C语言写了个求可达性矩阵的算法~

    可达性矩阵算法~ 直接上代码 #include <iostream> #include <cstring> using namespace std; #define n 5 v ...

  4. LCS以及输出路径模板

    记忆 两个for用来寻找LCS,DP是二维的,每一维代表了字符串的长度. 寻找的代码部分 if(a[i-1]==b[j-1]) dp[i][j]=dp[i-1][j-1]+1; else dp[i][ ...

  5. [Python3网络爬虫开发实战] 5.2-关系型数据库存储

    关系型数据库是基于关系模型的数据库,而关系模型是通过二维表来保存的,所以它的存储方式就是行列组成的表,每一列是一个字段,每一行是一条记录.表可以看作某个实体的集合,而实体之间存在联系,这就需要表与表之 ...

  6. stark组件之添加、修改页面内容搭建（七）

    如何快速的进行数据的添加以及修改呢?modelform来实现是可以达到效果的,在这里就是应用了modelform,每一个表都不同,所以需要创建不同的modelform. def get_model_f ...

  7. 基于html实现一个todolist待办事项

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  8. thinkphp整合系列之微信公众号支付

    <?phperror_reporting(E_ALL);ini_set('display_errors', '1');// 定义时区ini_set('date.timezone','Asia/S ...

  9. 洛谷 通天系列 P1760 P1757 P1759

    P1760 通天之汉诺塔 汉诺塔问题.一个高精乘单精解决 ans=2^n-1 /*by SilverN*/ #include<algorithm> #include<iostream ...

  10. codevs4439 YJQ Requires Food

    题目描述 Description 神犇YJQ有n个不同的妹子和m种食物,每一天每一种食物只供应一个妹子吃的份量.在接下来的t天内,YJQ准备包养所有的妹子. 对于每个妹子,她在t天内都只会吃某些特定的 ...