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样式表的基本概念的更多相关文章

  1. 一起学HTML基础-CSS样式表-基本概念、分类、选择器

    一.基本概念: CSS  (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  2. CSS样式表------第一章:样式表的基本概念

    CSS(Cascading Style Sheets,层叠样式表),控制页面样式外观,作用是美化HTML网页. 一. 样式表的基本概念 1.样式表的分类 (1)内联样式表  -----放在元素的开始标 ...

  3. CSS样式表

    CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...

  4. css 样式表

    CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/   注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...

  5. HTML第二部分 CSS样式表

    CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/   注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...

  6. HTML css 样式表

    CSS样式表 2.1.样式表的基本概念 2.1.1.样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. 例:<p style="font-size:14 ...

  7. WEB入门 四 CSS样式表深入

    学习内容 Ø        CSS选择器深入学习 Ø        CSS继承 Ø        CSS文本效果 Ø        CSS图片效果 能力目标 Ø        掌握CSS选择器的组合声 ...

  8. WEB入门三 CSS样式表基础

    学习内容 Ø        CSS的基本语法 Ø        CSS选择器 Ø        常见的CSS样式 Ø        网页中3种使用CSS的方式 能力目标 Ø        理解CSS的 ...

  9. 初识CSS样式表

    背景介绍: 接触了新闻公布系统,这也是自己第一个B/S的项目.从之前的拖拽空间.任意布局到现在的HTML总会有非常多的新奇.棘手和挑战.可是不管是何种形式都离不开主要的步骤:做前台.做后端.能够说一个 ...

  10. 当css样式表遇到层

    (附:White-space:pre可以是样式表里卖弄body的属性,作用是保持html源代码的空格与换行,等同<pre>标签.) Css样式表可以通过被封在层里的方式来限制页面所修饰的内 ...

随机推荐

  1. 条款14:在资源管理类中小心copying行为

    请牢记: 1.复制RAII对象必须一并复制它所管理的资源,所以资源的copying行为决定RAII对象的copying行为. 2.普遍常见的RAII class copying行为是:抑制copyin ...

  2. 如何在 cmd 命令行中查看、修改、删除与添加环境变量

    Windows 和 linux 区别 一.查看所有环境变量的名称和值:Linux下:exportWindows下:set二.根据名称查该环境变量的值:Linux下:echo $环境变量名比如:echo ...

  3. Python基础,day2

    程序练习 程序:购物车程序 需求: 启动程序后,让用户输入工资,然后打印商品列表 允许用户根据商品编号购买商品 用户选择商品后,检测余额是否够,够就直接扣款,不够就提醒 可随时退出,退出时,打印已购买 ...

  4. MySQL 事务嵌套

    MySQL默认自动提交(autocommit=1),如果要开启事务,先关闭自动提交(autocommit=0): InnoDB支持事务,MyISAM不支持: MySQL不支持事务嵌套:已经开启事务后, ...

  5. 什么是 VxLAN?

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. VLAN 和 ...

  6. Java web环境的搭建

    学习java web 首先得要能够在自己的电脑上配置环境,经查阅资料后了解,需要装java EEEclipse ,即企业版的,还有就是tomcat服务器. 第一步,从网上下载,eclipse 企业版的 ...

  7. 如何把设计稿中px值转化为想要的rem值

    首先我们需要的是把尺寸转化为rem值 假如 设计稿中的是 200px*200px的图片 移动端的设计图尺寸一般是640*750; 第一步.  把图片分为若干份(好算即可),每一份的大小就是rem的单位 ...

  8. jmeter性能测试前及测试后

    压测前:           1.压力测试两种场景:                    1)单场景,压测单个接口. 2)混合场景,多个接口关联压测. 2.压测时间:                ...

  9. 基于STM32之UART串口通信协议(四)Printf发送

    一.前言 1.简介 前面在UART发送中已经讲解过如何调用HAL库的HAL_UART_Transmit函数来实现串口发送,而在调用这个函数来实现串口发送的话,但是在发送数据或者字符的时候,需要将数据或 ...

  10. Confluence5.6.6安装和破解

    1.安装confluence 1. 软件环境说明 # 安装 jdk [root@wiki_5-- jar]# cat /etc/redhat-release CentOS Linux release ...