一、CSS：Cascading Style Sheet—层叠样式表，其作用是美化HTML网页。

样式表分类：内联样式表、内嵌样式表、外部样式表

1、内联样式表

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

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

红色部分即内联样式表，style即添加样式。

2、内嵌样式表

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

例如：<style type="text/css">

　　　　p    　　//格式对P标签有作用   　　/*以标签名命名的样式表，对所有此类标签都会执行*/

　　　　{

　　　　　　样式

　　　　}

　　　　</style>

3、外部样式表

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

★有些标签有默认的边距，一般写样式表代码的时候都会先去除，如下：

<style type="text/css">

*　　//对所有标签起作用　　/*对所有标签去除边距和间距*/

{

　　margin:0px;

　　padding:0px;

}

</style>

二、选择器

1、标签选择器

<style type="text/css">

p--------------标签选择器 //对P标签起作用

{

　　样式

}

2、class类选择器。---都是以“.”开头。

<head>

<style type="text/css">

.main--------------------/*定义样式*/-----类选择器

{

　　height:42px;

　　width:100%;

　　text-align:center;

}

</style>

</head>

<body>

<div class="main">----------------调用class样式,可引用多次区别ID选择器

</div>

</body>

3、ID选择器。以“#”开头。

<head>

<style type="text/css">

#main--------------------/*定义样式*/-----ID选择器

{

　　height:42px;

　　width:100%;

　　text-align:center;

}

</style>

</head>

<body>

<div id="main">----------------调用class样式，仅可以引用一次，区别与class选择器

</div>

</body>

4、复合选择器

1）、用“，”隔开，表示并列

<style type="text/css">

p, span--------------对标签P和span两者都执行同样的样式

{

　　样式

}

</style>

2）、用空格隔开，表示后代。

<style type="text/css">

.main p----------------类标签→p标签//首先找到引用“main”的标签，对该标签中的P标签起作用

{

　　样式

}

</style>

3）、筛选“.”

<style type="text/css">

p.sp----------------p标签→类标签//首先找到p标签，对于p标签中引用了class="sp"的标签起作用，执行以下样式

{

　　样式

}

</style>

三、练习：

HTML：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>---------------内嵌样式表
*-------------------------------------对所有标签去除边距和间距
{
margin:0px;
padding:0px;
}
</style>
<link href="yangshi1.css" rel="stylesheet" type="text/css" />-----------------------------引用外部样式表
</head>

<body>
<div>
<p style="font-size:24px; font-weight:bold; background-color:#FFC; color:#F00; text-align:center;">你好,欢迎浏览！</p>--------内联样式表
</div>
<div class="shi">------------------引用类选择器
<p>写一首诗</p>
<p class="shineirong">床前明月光</p>----------类选择器可多次引用
<p class="shineirong">哈哈哈哈哈</p>----------类选择器可多次引用
<p class="shineirong">哈哈哈哈哈</p>
<p class="shineirong">哈哈哈哈哈哈哈哈哈</p>
</div>
<div id="ge">-------------引用id选择器，只能引用一次
<p>唱一首歌</p>
</div>
<div id="wu">
<p>跳个舞</p>
</div>
<p><a href="http://www.baidu.com" target="_blank">百度</a>----------超链接
</p>
</body>
</html>

外部样式表：

@charset "utf-8";
/* CSS Document */
<style type="text/css">
p{---------------------------标签选择器
margin:0px;
padding:0px;
}
.shi{----------------------------类选择器
height:200px;
width:200px;
font-weight:bold;
color:#F03;
background-color:#CCC;
text-align:center;
}
#ge{--------------------------id选择器
margin:0px 290px 0px;
height:200px;
width:300px;
font-weight:bold;
color:#F03;
background-color:#0FF;
text-align:center;
line-height:200px;
}
.shineirong{
font-size:14px;
color:#30F;
font-weight:bold;
line-height:40px;
vertical-align:middle;
}
#wu{
height:auto;
width:auto;
font-size:24px;
font-weight:bold;
text-align:center;
margin:10px;
background:#0F0;
}
a:link{--------------------超链接样式，未点击，展示时样式
color:#000;
font-weight:bold;
font-size:35px;
text-decoration:none;
}
a:visited{----------------------访问完成时样式
color:#000;
}
a:hover{----------------------鼠标指向悬浮时样式
color:yellow;
}
a:active{-----------------------点击时样式
color:green;
}
</style>

html-css样式表的更多相关文章

  1. 深度理解CSS样式表，内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  3. JS 控制CSS样式表

    JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline.  ...

  4. HTML基础（三）——css样式表

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

  5. DOM与CSS样式表

    在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...

  6. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  7. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  8. 2016年10月27日--css样式表

    CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...

  9. CSS样式表 选择器

    1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例:<p style="font-size:14px;">内联样式表</p> &l ...

  10. HTML静态网页 css样式表

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

随机推荐

  1. python获取DBLP数据集

    #!/usr/bin/python # -*- coding: UTF-8 -*- import xml.sax import io, sys paper_tags = ('article', 'in ...

  2. Selenium2+python自动化13-多窗口、句柄（handle）

    前言 有些页面的链接打开后,会重新打开一个窗口,对于这种情况,想在新页面上操作,就得先切换窗口了.获取窗口的唯一标识用句柄表示,所以只需要切换句柄,我们就能在多个页面上灵活自如的操作了. 本篇以打开百 ...

  3. 深入理解JVM内存模型

    1.程序计数器在虚拟机的概念模型里字节码解释器工作时就是通过改变 这个计数器的值来选取下一条需要执行的字节码指令,分支.循环.跳转.异常处理. Java 虚拟机的多线程是通过线程轮流切换并分配处理器执 ...

  4. shell脚本学习（一）

    Shell脚本最常用于系统管理工作,或者用于结合现有的程序以完成小型.特定的工作. Shell的特点有: 1. 简单性 2. 可移植性 3. 开发容易 [什么是shell] 简单点理解,就是系统跟计算 ...

  5. mysql 4种启动方式

    mysql 4种启动方式 都是去调用mysqld文件 1. mysqld 启动 进入mysqld文件所在目录(/../libexec/mysqld) ./mysqld --defaults-file= ...

  6. centos上手动编译安装tmux的问题

    https://blog.linuxeye.com/323.html 装个tmux也是不容易.. 关键词:libevent要自己下载2.0版,然后编译.安装时还要各种参数指定目录.

  7. 【Map】MapTest

    package cn.itcast.p1.map.test; import java.util.HashMap; import java.util.Map; public class MapTest2 ...

  8. 树状DP （poj 2342）

    题目:Anniversary party 题意:给出N各节点的快乐指数,以及父子关系,求最大快乐指数和(没人职员愿意跟直接上司一起玩): 思路:从底向上的树状DP: 第一种情况:第i个员工不参与,F[ ...

  9. xtrabackup工具

    xtrabackup是基于InnoDB存储引擎灾难恢复的.它复制InnoDB的数据文件,尽管数据文件在内部是非一致性的,但在执行灾难恢复时可以保证这些数据文件是一致的,并且可用. 官方原理 在Inno ...

  10. codeforces 429D

    题意:给定一个数组你个数的数组a,定义sum(i, j)表示sigma(a[i],...a[j]),以及另外一个函数f(i, j) = (i - j)^2 + sum(i+1, j)^2 求最小的f( ...