HTML--CSS样式表的基本概念
CSS（Cascading Style Sheet 叠层样式表）
作用：美化HTML网页
（一）样式表分类
一.内联样式表
和HTML联合显示，控制精准，但是可重用性差，冗余多。
例如：<p style="font-size:14px;">内联样式表</p>
二.内嵌样式表
作为一个独立区域内嵌在网页里，必须写在<head>标签里。
例如：
<style type="text/css">
p //格式对标签p起作用
{
样式
}
</style>
（对什么标签起作用，可以直接写标签名）
三.外部样式表
新建一个CSS文件，用来放样式表。如果要在HTML文件中调用样式表，需要在HTML文件中点击右键→CSS样式表→附加样式表。一般用link链接方式。
有些标签有些默认的边距，一般写样式表代码的时候会先去除（也可以设置其他样式），如：
<style type="txet/css">
*//格式对所有的标签都起作用
{
margin:0px;
padding:0px;
}
</style>
（二）选择器
1.标签选择器。用标签名做选择器。
<style type="text/css">
p //格式对p标签起作用
{
样式；
}
</style>
2.class选择器。都是以“.”开头。
<head>
<style type="text/css"> .main /*定义样式*/
{
heigth: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 /*定义样式*/
{
heigth:42px;
width:100%;
text-align:center;} </style>
</head>
<body>
<div id="main"> <!--调用id样式-->
</div>
</body>
4.复合选择器
1）用“，”隔开，表示并列。
<style type=text/css>
p,span /*标签p、span两者同样的样式*/
{
样式；
} </style>
2）用空格隔开，表示后代。
<style type="text/css">
.main p /*找到使用样式“main”的标签，在该标签里的p标签使用该样式*/
{
样式；
} </style>
3）筛选“.”
<style type="text/css">
p.sp /*在标签p中的class=“sp”的标签，执行以下样式*/ {
样式；
}
</style>
链接的Style
a:link 超链接被点前状态
a:visited 超链接被点后状态
a:hover 悬停在超链接时的状态
a:active 点击超链接时的状态
在定义这些状态时有个顺序 l v h a (必须按照这个顺序)
注：在CSS样式表里，字体的大小后面必须要加上PX，不然设置的值无效。
HTML--CSS样式表的基本概念的更多相关文章
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- CSS样式表------第一章：样式表的基本概念
CSS(Cascading Style Sheets,层叠样式表),控制页面样式外观,作用是美化HTML网页. 一. 样式表的基本概念 1.样式表的分类 (1)内联样式表 -----放在元素的开始标 ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
- css 样式表
CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...
- HTML第二部分 CSS样式表
CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/ 注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...
- HTML css 样式表
CSS样式表 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14 ...
- WEB入门 四 CSS样式表深入
学习内容 Ø CSS选择器深入学习 Ø CSS继承 Ø CSS文本效果 Ø CSS图片效果 能力目标 Ø 掌握CSS选择器的组合声 ...
- WEB入门三 CSS样式表基础
学习内容 Ø CSS的基本语法 Ø CSS选择器 Ø 常见的CSS样式 Ø 网页中3种使用CSS的方式 能力目标 Ø 理解CSS的 ...
- 初识CSS样式表
背景介绍: 接触了新闻公布系统,这也是自己第一个B/S的项目.从之前的拖拽空间.任意布局到现在的HTML总会有非常多的新奇.棘手和挑战.可是不管是何种形式都离不开主要的步骤:做前台.做后端.能够说一个 ...
- 当css样式表遇到层
(附:White-space:pre可以是样式表里卖弄body的属性,作用是保持html源代码的空格与换行,等同<pre>标签.) Css样式表可以通过被封在层里的方式来限制页面所修饰的内 ...
随机推荐
- SQL数据库连接池与C#关键字return
SQL数据库连接池: 先前做的一个Sharepoint项目,在上线后的不久,最近一直出现间歇性访问缓慢问题Sharepoint特性问题,并分析了其数据库服务器,发现所耗内存已经达到了97%. 所以断定 ...
- Linux软件安装及基本概念
apt 基本用法 apt-get [options] install/remove/source 软件包1 [软件包2...] 注意:软件包不要带后缀.deb 常用命令及解释如下: apt下载软件是根 ...
- Linux ssh及远程连接工具
putty:http://www.so.com/link?url=http%3A%2F%2Fsoftdl.360tpcdn.com%2FPuTTY%2FPuTTY_0.67.zip&q=put ...
- 条款17：以独立语句将newed对象置入智能指针
请牢记: 以独立语句将newed对象存储于(置入)智能指针内.如果不这样做,一旦异常被跑出来,有可能导致难以察觉的资源泄露. 假设有个函数用来处理程序的优先权,另一个函数用来在某动态分配所得的Widg ...
- 高性能嵌入式核心板新标杆！米尔推出基于NXP i.MX8M处理器的MYC-JX8MX核心板
随着嵌入式及物联网技术的飞速发展,高性能计算的嵌入式板卡已经成为智能产品的基础硬件平台.为响应行业应用和满足客户需求,米尔电子推出基于NXP公司i.MX8M系列芯片的开发平台MYD-JX8MX系列开发 ...
- C#最新功能(6.0、7.0)
一直用C#开发程序,.NET的功能越来越多,变化也挺大的,从最初的封闭,到现在的开源,功能不断的增加,一直在进步.作为C#的强烈支持者,C#的变化,我不能不关注,这篇文章主要介绍,C#6.0和C#7. ...
- 使用nodejs-koa2-mysql-sequelize-jwt 实现项目api接口
nodejs-koa2-mysql-sequelize-jwt 技术栈:nodejs, koa2, mysql, sequelize, jwt 项目数据层和操作层分明 使用koa2框架中间件,参数处理 ...
- Varnish动静分离配置示例
动静分离 [root@varnish ~]# vim /etc/varnish/default.vclvcl 4.0;backend web { .host = "192.168.30.15 ...
- Django框架之前端渲染-模板层
Django 模板层 Django 模板层 前后端数据传递 (1) 后端朝前端页面传递数据的方式: # 将当前所在的名称空间中的名字全部传递给前端页面 # 第一种 return render( ...
- 视频技术详解：RTMP H5 直播流技术解析
本文聚焦 RTMP 协议的最精华的内容,接进行实际操作 Buffer 的练习和协议的学习. RTMP 是什么 RTMP 全称即是 Real-Time Messaging Protocol.顾名思义就是 ...