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#-信箱排序-PigeonHoleSort
# 算法实例 # 排序算法Sort 信箱排序PigeonHoleSort https://en.wikipedia.org/wiki/Pigeonhole_sort 算法說明 1.信箱算法使用一個完整 ...
- 点击显示div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- PHP组件化开发
设计思想中有两种极端:大而全.小而美. 一般我们常用的库是小而美,用的框架是大而全.从Symfony实现Component式开发开始,框架的组件化逐渐成为趋势.我们可以任意的组合各种Compoent来 ...
- 良好Web系统架构的几个因素
好像以前整理过一些思路. 这里的架构不是指纵向的架构,而是横向的架构方面. 三个词:挂件化.模块化.钩子化.
- Extjs 窗体居中,双重窗体弹出时清除父窗体的鼠标事件
这个是监控窗体缩放的事件 缩放中居中主要在 'beforeshow' 和 'destroy'两个事件里面监控 var EditTempWindow; Ext.EventManager.onWindow ...
- Atitit.excel导出 功能解决方案 php java C#.net版总集合.doc
Atitit.excel导出 功能解决方案 php java C#.net版总集合.docx 1.1. Excel的保存格式office2003 office2007/2010格式1 1.2. 类库选 ...
- Virtual Box和Linux的网络配置盲记
近来可能在虚拟机重装了Linux的缘故,在用yum安装软件时出现错误,在提示上连接镜像网站时,都是"linux counldn't resolve host"这样的提示.我估计是l ...
- Spring4学习笔记2-配置集合属性
1 可使用<list> <map> <set>等来配置集合属性 2 List <!-- 配置List属性 --> <bean id="p ...
- Spring4学习笔记2-配置Bean
1.配置bean 配置形式:Xml和注解方式 Bean的配置方式:通过全类名(反射).工厂.FactoryBean 1.1 id必须唯一 2 Spring提供两种类型的IOC容器的实现 BeanFac ...
- [deviceone开发]-do_SlideListView的简单示例
一.简介 利用提供的SlideListVIew实现那种cell可以滑动露出底部按钮的功能 主要组件:do_slidelistview 二.效果图 三.相关讨论 http://bbs.deviceone ...