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样式表可以通过被封在层里的方式来限制页面所修饰的内 ...
随机推荐
- Linux编辑器Vim和Emacs入门
sudo 命令 debian系统没有自带,需要安装: apt-get install sudo 安装位置为 /usr/bin/sudo,对应配置文件为 /etc/sudoers sudoers授权格式 ...
- Codility--- Triangle
Task description A zero-indexed array A consisting of N integers is given. A triplet (P, Q, R) is tr ...
- 修改系统的shell
一:修改系统的shell (选用zsh解释器,相对于bash,对它有很好的兼容性,而且功能上更加强大) 1.查看系统中安装的shell cat /etc/shells ...
- Spring源码解读之BeanFactoryPostProcessor的处理
前言 前段时间旁听了某课堂两节Spring源码解析课,刚好最近自己又在重新学习中,便在这里记录一下学习所得.我之前写过一篇博文,是介绍BeanFactoryPostProcessor跟BeanPost ...
- 电商、P2P等大型互联网系统包含哪些业务模块?
01 前言 在互联网飞速发展的时代,各大互联网公司正在进行激烈的竞争,业务模式也在不断的扩张,这种现状使得目前各大公司的架构系统面临着极大的挑战,而对于我们普通的软件开发者而言,如果你仅仅了解过一些关 ...
- CSS3 入门级
从刚开始学习的选择器总共有十三种: id class 标签 子代 后代 交集 并集 通配符 伪类 结构 属性 相邻 兄弟 (全当复习,如果有用的话那就正好) div[name=zhang] 这是属性 ...
- SwiftLint:代码规范检查工具介绍
Swift-CodeStyle Checker:SwiftLint 介绍: SwiftLint 是一个用于强制检查 Swift 代码风格和规定的一个工具,基本上以 GitHub's Swift 代码风 ...
- 并发编程-Future+callable+FutureTask 闭锁机制
项目中经常有些任务需要异步(提交到线程池中)去执行,而主线程往往需要知道异步执行产生的结果,这时我们要怎么做呢?用runnable是无法实现的,我们需要用callable实现. FutureTask ...
- POJ 1986:Distance Queries(倍增求LCA)
http://poj.org/problem?id=1986 题意:给出一棵n个点m条边的树,还有q个询问,求树上两点的距离. 思路:这次学了一下倍增算法求LCA.模板. dp[i][j]代表第i个点 ...
- jacoco生成覆盖率报告
操作步骤: 1.下载git上最新的代码到本地 git clone {代码地址} 2.在服务器上打出相关服务的jar包 1) 登上服务器,切换到目标服务所在路径: cd /xx/xx/xx/xx 2) ...