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)开始. ...
随机推荐
- C#编程总结（四）多线程应用
C#编程总结(四)多线程应用 多线程应用很广泛,简单总结了一下: 1)不阻断主线程,实现即时响应,由后台线程完成特定操作2)多个线程,完成同类任务,提高并发性能3)一个任务有多个独立的步骤,多个线程并 ...
- NanUI for Winform 使用示例【第二集】——做一个所见即所得的Markdown编辑器
经过了这一个多星期的调整与修复,NanUI for .NET Winform的稳定版已经发布.应广大群友的要求,现已将NanUI的全部代码开源. GitHub: https://github.com/ ...
- 不可或缺 Windows Native (17) - C++: 类与对象
[源码下载] 不可或缺 Windows Native (17) - C++: 类与对象 作者:webabcd 介绍不可或缺 Windows Native 之 C++ 类与对象 示例1.类的设计CppE ...
- virtualbox创建com对象失败（解决方法）
我的电脑是win7 64bit的,和舍友同时安装virtualbox,她的是win8,安装得很顺利. 我的就比较坎坷了,安装完打开后就出现了这个问题. 试过网上的好几个方法都不行,最后结合了两 ...
- 如何很好的Review自己的代码
写这篇博文的原因是因为自己写的代码经常会因为返工,delay项目的交付日期.总结了一下引起项目delay的原因,大概有如下几点: 在没有完全深熟悉需求交互细节的情况下:诸如根据不同渠道设置不同的订单状 ...
- Scalaz（42）－ Free ：FreeAp－Applicative Style Programming Language
我们在前面花了几期时间讨论Free Monad,那是因为FP既是Monadic programming,Free Monad是FP模式编程的主要方式.对我们来说,Free Monad代表着fp从学术探 ...
- android 网络通讯
//get方式请求网络数据 String urlPath="http://192.168.98.112:8080/CloudMusicPlayer/fragment1_1_lv2/json/ ...
- Git修改提交的用户名和Email
git config --global user.name "Your Name" git config --global user.email you@example.com
- GJM : 用JIRA管理你的项目（一）JIRA环境搭建 [转载]
感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...
- Typescript 中类的继承
Typescript中类的定义与继承与后端开发语言java/C#等非常像,实现起来非常方便,而且代码便于阅读. 用Typescript写较大项目时是非常有优势的. /** * BaseClass */ ...