CSS基础(一)——语法和选择器

  • 时间:2018-11-22 22:42 作者:小白前端 来源:小白前端 阅读:113
  • 扫一扫,手机访问
摘要:童靴们,从这篇文章开始我们进入CSS的学习了,不知道你们HTML的课程学习的怎样样。肯定要多看多练,把基础打好。(关注小白前台,才能持续收到文章推送!)废话不多说,下面带大家一起学习CSS。CSS简介css的英文全称Cascading Style Sheets,中文叫层叠样式表。它是用来体现HTML

童靴们,从这篇文章开始我们进入CSS的学习了,不知道你们HTML的课程学习的怎样样。肯定要多看多练,把基础打好。

(关注小白前台,才能持续收到文章推送!)

废话不多说,下面带大家一起学习CSS。

CSS简介

css的英文全称Cascading Style Sheets,中文叫层叠样式表。它是用来体现HTML文件样式的计算机语言。它不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS的特点是为HTML标记语言提供了一种样式形容,定义了其中元素的显示方式。它可以实现修改一个小的样式升级与之相关的所有页面元素。

CSS 语法

css的结构是由选择器,一条或者多条公告组成的。每条公告是由属性和属性值组成的。属性是你想要设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。公告和公告之间被分号分开。

selector {property:value}

给大家举个栗子,给h3增加字体颜色为红色:

CSS基础(一)——语法和选择器

css样式如下:

h3 {color:#f00;}

童靴们看上边的栗子,h3就是选择器,color为设置的样式属性,#f00是属性值。

假如你想接着为h3增加样式,直接在分号后边写即可以,例如设置字号为24px;

h3 {color:#f00;font-size:24px;}

选择器的分组

在网页中,不免好多元素有相同的样式,那么我们可以对选择器进行分组,使分组的元素分享同一组样式。

p,h3{color:#f00;}

上面的例子,所有的p元素和h3元素字体颜色设置成红色。

继承

在CSS中,子元素可以继承父元素属性。

CSS基础(一)——语法和选择器

body中两个子元素分别是h3和p,给body元素增加属性,设置字体颜色为红色。

CSS基础(一)——语法和选择器

给body增加color属性

在浏览器中显示:

CSS基础(一)——语法和选择器

子元素继承父元素属性

通过CSS继承,h3元素和p元素继承了父元素body的属性。

CSS 选择器

小编先详情应用最多的几种选择器。后续文章中会带大家认识更多的选择器。

1.标签选择器

直接使用标签名称作为选择器。(上边讲到的内容都是使用的标签选择器)

div {color:#00f;}

2.id选择器

在之前的文章中小编给大家总结过和css相关的属性,不知道大家有木有做笔记呢。

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。

如下,给h3和p各自己设置一个属性(id属性是唯一的)

CSS基础(一)——语法和选择器

给元素定义id属性

为元素增加样式:

CSS基础(一)——语法和选择器

使用id选择器为元素增加样式

在浏览器中显示:

CSS基础(一)——语法和选择器

3.类选择器

类选择器以一个点号显示。

我们把上面的例子id属性改成class属性:

CSS基础(一)——语法和选择器

给元素增加class属性

使用类选择器增加样式:

CSS基础(一)——语法和选择器

类选择器用一个小点定义

在浏览器中显示:

CSS基础(一)——语法和选择器

4.派生选择器

派生选择器其实是其余选择器的一种组合形式。依据元素在其位置的上下文关系来定义样式的。

CSS基础(一)——语法和选择器

增加样式:

CSS基础(一)——语法和选择器

使用派生选择器,根据元素的上下文关系确定某个元素的样式,使代码看起来更加的整洁。

在浏览器中显示:

CSS基础(一)——语法和选择器

今天的内容讲到这里了,大家看着例子练习一下吧。

CSS基础(一)——语法和选择器

你必需非常努力,才能看起来毫不费力!

关注小白前台,才能持续收到文章推送!

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】WEB前端学习:JS实现中文简体繁体切换(2019-08-22 12:38)
【系统环境|服务器应用】前台开发入门到实战:HTML5语义化元素你真的用的正确吗?(2019-08-22 04:16)
【系统环境|服务器应用】Vue仿微信app页面跳转动画(2019-08-22 04:16)
【系统环境|服务器应用】webstorm使用快捷键快速修正单个文件的style(2019-08-22 04:16)
【系统环境|服务器应用】程序员从学生到阿里经历的5次蜕变:海阔凭鱼跃,天高任鸟飞(2019-08-22 04:16)
【系统环境|服务器应用】var、let、const的区别(2019-08-22 04:16)
【系统环境|服务器应用】mini-ui加载框Indicator 被遮挡问题(2019-08-22 04:15)
【系统环境|服务器应用】【对讲机的那点事】玩对讲机,对于对讲机的亚音你理解吗?(2019-08-22 04:15)
【系统环境|服务器应用】前台中高级面试,内功心法(上)(2019-08-22 04:15)
【系统环境|服务器应用】17、改进轮播图之功能封装(2019-08-22 04:15)
手机二维码手机访问领取大礼包
返回顶部