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. IT安全军火库-转

    全球有260万信息安全专业人士,渗透测试工具是他们“安全军火库”中最常使用的装备,但直到最近,可用的渗透测试工具才丰富起来,但这也带来一个问题,挑选合适的渗透测试工具成了一件麻烦事,一个最简单的方法就 ...

  2. DirectUI的消息流转

    Windows是一个基于消息循环的系统,DirectUI同样遵循这样的消息流转.当界面呈现.用户点击.定时器等各种各样的消息一旦进入windows消息循环队列,系统自动调用该窗口的WndProc过程. ...

  3. js api 之 fetch、querySelector、form、atob及btoa

    js api 之 fetch.querySelector.form.atob及btoa 转载请注明出处: https://www.cnblogs.com/funnyzpc/p/11095862.htm ...

  4. solr 重要的知识点

    1 solr 查询参数说明 常用 ) q - 查询字符串,必须的. ) fl - 指定返回那些字段内容,用逗号或空格分隔多个. ) start - 返回第一条记录在完整找到结果中的偏移位置, 开始,一 ...

  5. PATB 1015. 德才论 (25)

    1015. 德才论 (25) 比较函数折腾好久,最后还因为cout,printf的区别而超时,超时是因为cout输出效率低. 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 ...

  6. SHELL 中条件语句的运用 if for 条件测试语句

    if条件测试语句可以让脚本根据实际情况自动执行相应的命令.从技术角度来讲,if语句分为单分支结构.双分支结构.多分支结构:其复杂度随着灵活度一起逐级上升. if条件语句的单分支结构由if.then.f ...

  7. Centos7下安装Mysql8.0

    突然发现mysql都有8.0了,且性能提升比较明显,就自己装来玩玩. centos的yum源中默认是没有mysql的,所以我们需要先去官网下载mysql的repo源并安装: 官网:http://dev ...

  8. mail.inc实现周密的留言发邮箱

    我网站上很多地方都有给我留言的链接,这些链接指向一个地方 http://www.dushangself.site/emlog/?post=8 (源码使用方式:一共四个源代码,第一个和第二个写在一起,, ...

  9. 每天学点node系列-fs文件系统

    好的代码像粥一样,都是用时间熬出来的. 概述 文件 I/O 是由简单封装的标准 POSIX 函数提供的. 通过 require('fs') 使用该模块. 所有文件系统操作都具有同步和异步的形式. 异步 ...

  10. iOS组件化开发一远端私有库建立(二)

    公共库业务,基础层划分! 一.构建私有云,本文推荐为码云 1.构建名称为LuckTimeSpec,选择私有建立: 2.Copy地址的https 链接: 二.打开终端 输入: cd /Users/zha ...