HTML基础（三）——css样式表
CSS（Cascading Style Sheet，叠层样式表），作用是美化HTML网页。
/*注释区域*/此为注释语法
一、样式表
（一）样式表的分类
1.内联样式表
和HTML联合显示，控制精确，但是可重用性差，冗余较多。
例：<p style="font-size:14px;">内联样式表</p>
2.内嵌样式表
作为一个独立区域内嵌在网页里，必须写在head标签里面。
<style type="text/css">
p //格式对p标签起作用
{
样式；
}
</style>
3.外部样式表
新建一个CSS文件，用来放置样式表。如果要在HTML文件中调用样式表，需要在HTML文件中点右键→CSS样式表→附加样式表。一般用link连接方式。
注：css文件中不需要写style标签
有些标签有默认的边距，一般写样式表代码的时候都会先去除（也可以设置其他的样式），如下：
注：上图就是先去掉边距和间距。
（二）选择器
1.标签选择器。用标签名做选择器。
2.class选择器。都是以“.”开头。
注：class选择器可以和标签选择器叠加，显示出不同效果。
3.ID选择器。以“#”开头。
注：ID选择器可以和标签选择器叠加，显示出不同效果。
<div id="样式名">
4.复合选择器
（1）用“，”隔开，表示并列。
（2）用空格隔开，表示后代。
（3）筛选“.”。
二、样式属性
（一）背景与前景
1.背景：
2.前景字体：
（二）边界和边框
border（表格边框、样式等）、margin（表外间距）。padding（内容与单元格间距）。
（三）列表与方块
width、height、（top、bottom、left、right）只有在绝对坐标情况下才有用。
css样式表代码显示：
css文件代码：
@charset "utf-8";
/* CSS Document */
*/*所有标签起作用，边距和间距都设为0px*/
{
margin:0px;
padding:0px;}
p,span /*直接写个标签名字，表示所有的p标签都执行这个样式*/
{
background-color:#F6C;
color:#0F0;}
p.sp
{
background-color:#FF0;
color:red;
font-size:36px;}
.main/*以.开头，使用class引用此样式表*/
{
height:50px;
width:300px;
background-color:#0FF;
font-size:45px;}
.main p/*表示使用class=main的标签内若有p标签，执行此样式*/
{
width:400px;
font-size:36px;}
#main/*以#开头，使用id选择器引用此样式表*/
{
height:60px;
width:500px;
background-color:#60C;
font-size:36px;}
html文件代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css"> </style>
<link href="Untitled-1.css" rel="stylesheet" type="text/css" />
</head> <body>
<div style="background-color:#0F0">1234567</div>
<p>春天来了。</p>
<p>花儿开了，草儿绿了。</p>
<p class="sp">鹅鹅鹅，曲项向天歌。</p>
<span class="main">锄禾日当午<p>汗滴禾下土</p></span>
<p class="main">白日依山尽</p>
<p id="main" >床前明月光</p>
<span>疑是地上霜</span><br />
</body>
</html>
运行效果显示：
HTML基础（三）——css样式表的更多相关文章
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- 3月22日 html(三)css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确,但是可重用性差,冗余较多. 例 ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- html基础 CSS样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- CSS三种样式表
1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...
- CSS的三种样式表和优先级
1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...
- CSS样式----图文详解：css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
随机推荐
- Windows Server 2012中配置AD域服务
1.安装完AD域服务后,我们返回服务器管理器界面,点击"将此服务器提升为域控制器",选择"添加新林". 输入域名称:contoso.com 2.按图中所示选择林 ...
- Mysql高并发优化
一.数据库结构的设计 1.数据行的长度不要超过8020字节,如果超过这个长度的话在物理页中这条数据会占用两行从而造成存储碎片,降低查询效率. 2.能够用数字类型的字段尽量选择数字类型而不用字符串类型的 ...
- 使用ASP.NET 4的自动启动特性,解决ASP.NET第一次访问速度慢问题
些web应用在可以处理用户访问之前,需要装载很多的数据,或做一些花费很大的初始化处理.今天使用 ASP.NET 的开发人员经常使用应用的Global.asax 文件中的 “Application_St ...
- 使用CallerMemberName简化InotifyPropertyChanged的实现
在WPF中,当我们要使用MVVM的方式绑定一个普通对象的属性时,界面上往往需要获取到属性变更的通知, class NotifyObject : INotifyPropertyChanged ...
- how-to-redirect-cin-and-cout-to-files
#include <iostream> #include <fstream> #include <string> void f() { std::string li ...
- lua编译出so文件
把lua编译出so文件 http://superuser.com/questions/557884/getting-error-recompile-with-fpic http://guiquanz. ...
- 2016暑假多校联合---Joint Stacks （STL）
HDU 5818 Problem Description A stack is a data structure in which all insertions and deletions of e ...
- java8中的map和reduce
java8中的map和reduce 标签: java8函数式mapreduce 2014-06-19 19:14 10330人阅读 评论(4) 收藏 举报 分类: java(47) FP(2) ...
- activiti工作流的web流程设计器整合视频教程
本视频为activiti工作流的web流程设计器整合视频教程 整合Acitiviti在线流程设计器(Activiti-Modeler 5.21.0 官方流程设计器) 本视频共讲了两种整合方式 1. 流 ...
- HTML表单提交数据中application/x-www-form-urlencoded和multipart/form-data的区别
在Form元素的语法中,EncType表明提交数据的格式 用 Enctype 属性指定将数据回发到服务器时浏览器使用的编码类型. 下边是说明: application/x-www-form-urlen ...