一、基本概念:

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

Style,样式,即目标显示出来的风格样式,作用是美化页面。

二、样式表分类:

内联式样式表、内嵌式样式表、外联式样式表。

1、内联式样式表:直接写在标签内部,使用Style属性设置样式。例如:设置div及span背景颜色及宽和高,会发现span是无法设置宽和高的,因为默认内容有多少就占用多少,无法设置。

2、内嵌式样式表:作为一个独立区域内嵌在网页里,必须写在head标签里,使用<style type="text/css"></style>标签包裹起来,设置一种标签样式属性,允许body里所有同类标签引用同这个样式属性,无需设置每个标签的样式属性,减少冗余。例如:设置div样式属性,body内所有div都会套用该样式属性。

3、外联式样式表:新建一个CSS文件,用来存放样式表,作为一个单独文件存放。如果要在HTMl文件中调用样式表,需要在HTMl文件中右键→CSS样式表→附加样式表,一般用link连接方式连接。

新建CSS样式表:

写CSS样式表:

关联样式表:空白处右键

4、有些标签有默认的边距,一般写样式表代码的时候都会先去除。前后对比如下:(*——针对所有标签)

三、选择器:

在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素。

(1)标签选择器,用标签名做选择器,比如:p为标签名,用p做选择器,从内嵌式样式表中选择。

(2)class选择器,调用以“.”开头的样式表样式。例如:用“.”命名一个样式表gushi0和gushi1,用class调用

(3)id选择器,调用以“#”开头的样式表样式,class无法调用“#”命名的样式表,id也无法调用“.”命名的样式表。id选择器类似class选择器,id为唯一,区别此处不讲。例如:用“#”命名一个样式表g2,用id调用

(4)复合选择器

a-用“,”隔开,表示并列,使用同样的样式,例如:设置“p,div”表示p标签和div标签都是用指定的样式。

b-用空格隔开,表示后代,例如:“div p”表示div标签中的p标签

c-筛选“.”,例如"p.gushi"表示p标签中执行了class="gushi"的标签,执行样式

一起学HTML基础-CSS样式表-基本概念、分类、选择器的更多相关文章

  1. 一起学HTML基础-CSS样式表常用样式属性

    样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...

  2. html基础 CSS样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

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

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

  4. HTML基础(三)——css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  5. CSS样式表初学,比C#和JS简单

    今天咱们一起来看下CSS样式表的基本基础 经常看博客或者喜欢钻研代码这一类的人对CSS可能有所耳闻,但具体的可能不是很清楚 那什么是CSS呢?与HTML又有什么区别呢?今天咱们就来说道下这个CSS C ...

  6. CSS样式表继承详解

    最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...

  7. CSS样式----CSS样式表的继承性和层叠性(图文详解)

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

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

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

  9. 深度理解CSS样式表,内有彩蛋....

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. myeclipse 没有任何问题,可偏偏还报这错。

    Windows–>Preferences–>Java–>Compiler–>Building–>Output folder–> ”Rebuild class fil ...

  2. rabbitMQ学习(二)

    一端发送,多端消费 发送端: import java.io.IOException; import com.rabbitmq.client.ConnectionFactory; import com. ...

  3. ytu 1301:Excel地址转换(水题,进制转换)

    Excel地址转换 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 41  Solved: 11[Submit][Status][Web Board] D ...

  4. SCU3185 Black and white(二分图最大点权独立集)

    题目大概说有几个黑色.白色矩阵,问能选出黑白不相交的矩形面积和的最大值. 建二分图,黑色矩阵为X部的点,白色为Y部,XY的点权都为其矩阵面积,如果有个黑白矩阵相交则它们之间有一条边,那样问题就是要从这 ...

  5. python 将数据随机分为训练集和测试集

    # -*- coding: utf-8 -*- """ Created on Tue Jun 23 15:24:19 2015 @author: hd "&qu ...

  6. Codeforces Round #309 (Div. 2) C. Kyoya and Colored Balls 排列组合

    C. Kyoya and Colored Balls Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contes ...

  7. SaaS系列介绍之十: SaaS的商业模式

    1 引言 赚钱之道很多,但是找不到赚钱的种子,便成不了事业家.作为职业软件人,我们都寻求使用一种有效而经济的过程来建造一个能够工作的,有用的产品.                            ...

  8. s7-300 第二讲

  9. MongoDB 副本集管理

    一.以单机模式启动成员节点 有时候出于维护的需要,需要以单机模式启动某个节点而不是一个副本集成员身份. 1).首先查询服务器命令行参数 db.serverCmdLineOpts() 2).关闭当前副本 ...

  10. linux/unix解压缩

    转自:http://blog.sina.com.cn/s/blog_6f2d29af01015ac6.html zip: 压缩: zip [-AcdDfFghjJKlLmoqrSTuvVwXyz$][ ...