柚子快报激活码778899分享:前端 CSS3基础内容

http://yzkb.51969.com/

目录

CSS基本样式

选择器分类

标签选择器

类选择器

利用类选择器画三个盒子

 多类名

id选择器

id选择器和类选择器的区别

通配符选择器

CSS字体属性

字体粗细font-weight

 字体样式

 CSS文本属性

CSS的引入方式

行内样式表(行内式)

内部样式表(嵌入式)

外部样式表(链接式)

 综合案例-新闻页面

CSS基本样式

CSS是层叠样式表的简称,CSS是一种标记语言,称为CSS样式表

CSS主要用于设置HTML页面中的文本内容、图片的外形以及版面的布局和外观显示样式

结构(HTML)与样式(CSS)相分离

CSS规则由两个主要的部分构成:选择器以及一条或多条声明

选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式属性和属性值以“键值对”的形式出现属性是对指定的对象设置的样式属性,例如字体大小、文本颜色等属性和属性值之间用英文“:”分开多个"键值对"之间用英文";"分开

CSS语法规范

有点意思

属性值前面,冒号后面,保留一个空格

选择器(标签)和大括号中间保留空格

选择器分类

选择器分为基础选择器和复合选择器

基础选择器是由单个选择器组成的;

基础选择器又包括:标签选择器、类选择器、id选择器和通配符选择器

标签选择器

用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签制定统一的CSS样式

 作用:可以把某一类标签全部选择出来,比如所有的

标签和所有的标签

优点:能快速为页面中同类型的标签统一设置样式

类选择器

如果想要差异化选择不同的标签,单独选一个或者几个标签,可以使用类选择器

类选择器

  • 冰雨
  • 大雨
  • 狂风暴雨
  • 没下雨

我也想变成红色

类选择器使用"."进行标识,后面紧跟类名(不能是HTML中的标签名)可以理解为给这个标签起了一个名字长名称或词组可以使用中横线来为选择器命名不要使用纯数字、中文等命名,尽量使用英文字母来表示命名要有意义,尽量使别人一眼就知道这个类名的目的

利用类选择器画三个盒子

利用类选择器画三个盒子

红色

绿色

红色

 多类名

我们可以给一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选出这个标签

多类名的使用方式

张三

红色

绿色

红色

可以把一些标签元素相同的样式(共同的部分)放到一个类里面这些标签都可以调用这个公共的类,然后再调用自己的类节省CSS代码,统一修改也非常方便

id选择器

HTML元素以id属性来设置id选择器,CSS中id选择器以“#”来定义

id选择器

迈克尔杰克逊

id选择器和类选择器的区别

类选择器(class)好比人的名字,一个人可以有多个名字,同时一个名字也可以被多个人使用id选择器好比人的身份证号码,全中国唯一的,不能重复id选择器和类选择器最大的不同在于使用次数上类选择器在修改样式中用的最多,id选择器一般用于页面唯一性的元素上,经常和javaScript搭配使用

通配符选择器

通配符选择器使用"*"定义,它表示选取页面中所有元素(标签)

通配符选择器不需要调用,自动就给所有的元素使用样式

通配符选择器

我的

我的

  • 还是我的

CSS字体属性

CSS字体属性之字体系列

静夜思

床前明月光

疑是地上霜

举头望明月

低头思故乡

各种字体之间必须使用英文状态下的逗号隔开一般情况下,如果有空格隔开的多个单词组成的字体,加引号尽量使用系统默认自带字体一个一个地试,如果第一个字体系统中不存在,则使用第二个,字体系列中都不存在的话就使用系统默认字体

标题标签的字体大小需要单独指定

字体粗细font-weight

CSS字体属性之字体粗细

静夜思

床前明月光

疑是地上霜

举头望明月

低头思故乡

 字体样式

font-style: italic;

标签也可以使得字体成为斜体

复合属性

世界这么大,我想去看看;钱包这么小,哪也去不了

 CSS文本属性

CSS文本外观属性之颜色

世界这么大,我想去看看

粉红色的回忆

床前明月光

疑是地上霜

举头望明月

低头思故乡

CSS的引入方式

行内样式表(行内式)

在元素标签内部的style属性中设定CSS样式,适合于修改简单样式

style其实就是标签的属性,在双引号中间,写法要符合CSS规范

可以控制当前的标签设置样式

低头思故乡

内部样式表(嵌入式)

将所有的CSS代码抽取出来,单独放到一个

所谓内部样式表,就是在html页面内部写样式,但是单独写到style标签内部

外部样式表(链接式)

实际开发都是外部样式表,适合于样式比较多的情况,核心是样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用

引入外部样式表分为两步:

①新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中

②在HTML页面中,使用标签引入这个文件

外部样式表

我想去那黄土高坡

/* CSS文件里面只有样式没有标签 */

/* 文件名为style.css */

div {

color: red;

}

 综合案例-新闻页面

Document

北方高温明日达鼎盛 京津冀多地地表温度将超60℃

2019-07-03 16:31:47 来源: 中国天气网 


中国天气网讯 今天(3日),华北、黄淮多地出现高温天气,截至下午2点,北京、天津、郑州等地气温突破35℃。预报显示,今后三天(3-5日),这一带的高温天气将继续发酵,高温范围以及强度将在4日达到鼎盛,预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃,其中北京和石家庄的最高气温还有望创今年以来的新高。

气温41.4℃!地温66.5!北京强势迎七月首个高温日

柚子快报激活码778899分享:前端 CSS3基础内容  第1张

今天,华北、黄淮一带的高温持续发酵,截至今天下午2点,陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中,北京、天津、郑州均迎来高温日。

在阳光暴晒下,地表温度也逐渐走高。今天下午2点,华北黄淮大部地区的地表温度都在50℃以上,部分地区地表温度甚至超过60℃。其中,河北衡水地表温度高达68.3℃,天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。

明日热度再升级!京津冀携手冲击38℃+

中国天气网气象分析师王伟跃介绍,明天(4日),华北、黄淮地区35℃以上的高温天气还将继续升级,并进入鼎盛阶段,高温强度和范围都将发展到最强。 明天,北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。

不过,专家提醒,济南被雨水天气完美绕开,因此未来一周,当地的高温还会天天上岗。在此提醒当地居民注意防暑降温,防范持续高温带来的各种不利影响。(文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽)

chrome调试工具的使用

左边是HTML元素结构,右边是CSS样式

如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误

如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误

Ctrl+0复原浏览器大小

柚子快报激活码778899分享:前端 CSS3基础内容

http://yzkb.51969.com/

相关链接

评论可见,请评论后查看内容,谢谢!!!评论后请刷新页面。