一、样式表

（一）样式表的分类

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. vue 封装自定义组件

    组件结构 sjld >index.js >sjid.vue 最好单独放一个文件夹,有依赖的话装依赖 Sjld.vue 内容 <template id="sjld" ...

  2. Python学习笔记（2）——Python的函数、模块、包和库

    Table of Contents 1. 函数. 2. 模块. 3. 包(package) 4. 库(library) 初识Python,对于没有接触过编程的我,恐怕只能听懂什么是函数,这里介绍一下几 ...

  3. Linux 内核框架图

  4. idea导入本地idea的web项目(服务器用的是tomcat)

    开始吧!!! 点击import project. 我以SpringMVCPro3为例,选中,点击OK 点击next 继续next 随便吧,我点击yes 选中工程,点击next lib1不要钩,然后点击 ...

  5. canvas学习--准备

    一)canvas标签 属性: 1.width 和 height 控制canvas宽高: 2.style添加基本样式 3.class,id属性 4.标签内添加一行文本,主要用于浏览器不支持canvas标 ...

  6. buf.slice()

    buf.slice([start[, end]]) start {Number} 默认:0 end {Number} 默认:buffer.length 返回:{Buffer} 返回一个指向相同原始内存 ...

  7. Android : reletive layout

    在兄弟的上下左右: android:layout_toRightOf="@id/btn1"/> android:layout_toLeftOf="@id/img1& ...

  8. ModelForm组件和forms组件补充

    forms组件补充: forms组件的三个字段:ChoiceField, ModelChoiceField & ModelMultipleChoiceField # forms组件:Choic ...

  9. Thinkphp5.0 的视图view的循环标签

    Thinkphp5.0 的视图view的循环标签 volist标签: <!-- 使用volist --> <!-- name是传递过来的要循环变量名 --> <!-- k ...

  10. Delphi：Indy9的IdFTP完全使用

    Delphi 7自带的INDY控件,其中包含了IdFTP,可以方便的实现FTP客户端程序,参考自带的例子,其中有上传.下载.删除文件,但是不包含对文件夹的操作,得自己实现上传.下载.删除整个文件夹(带 ...