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样式表可以通过被封在层里的方式来限制页面所修饰的内 ...
随机推荐
- 条款14:在资源管理类中小心copying行为
请牢记: 1.复制RAII对象必须一并复制它所管理的资源,所以资源的copying行为决定RAII对象的copying行为. 2.普遍常见的RAII class copying行为是:抑制copyin ...
- 如何在 cmd 命令行中查看、修改、删除与添加环境变量
Windows 和 linux 区别 一.查看所有环境变量的名称和值:Linux下:exportWindows下:set二.根据名称查该环境变量的值:Linux下:echo $环境变量名比如:echo ...
- Python基础,day2
程序练习 程序:购物车程序 需求: 启动程序后,让用户输入工资,然后打印商品列表 允许用户根据商品编号购买商品 用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 可随时退出,退出时,打印已购买 ...
- MySQL 事务嵌套
MySQL默认自动提交(autocommit=1),如果要开启事务,先关闭自动提交(autocommit=0): InnoDB支持事务,MyISAM不支持: MySQL不支持事务嵌套:已经开启事务后, ...
- 什么是 VxLAN?
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. VLAN 和 ...
- Java web环境的搭建
学习java web 首先得要能够在自己的电脑上配置环境,经查阅资料后了解,需要装java EEEclipse ,即企业版的,还有就是tomcat服务器. 第一步,从网上下载,eclipse 企业版的 ...
- 如何把设计稿中px值转化为想要的rem值
首先我们需要的是把尺寸转化为rem值 假如 设计稿中的是 200px*200px的图片 移动端的设计图尺寸一般是640*750; 第一步. 把图片分为若干份(好算即可),每一份的大小就是rem的单位 ...
- jmeter性能测试前及测试后
压测前: 1.压力测试两种场景: 1)单场景,压测单个接口. 2)混合场景,多个接口关联压测. 2.压测时间: ...
- 基于STM32之UART串口通信协议(四)Printf发送
一.前言 1.简介 前面在UART发送中已经讲解过如何调用HAL库的HAL_UART_Transmit函数来实现串口发送,而在调用这个函数来实现串口发送的话,但是在发送数据或者字符的时候,需要将数据或 ...
- Confluence5.6.6安装和破解
1.安装confluence 1. 软件环境说明 # 安装 jdk [root@wiki_5-- jar]# cat /etc/redhat-release CentOS Linux release ...