资讯专栏INFORMATION COLUMN

前端菜鸟笔记 Day-3 CSS基础

mingzhong / 1296人阅读

摘要:派生选择器依据元素的位置关系来定义样式。称其为上下文选择器,称其为派生选择器。在现在布局中,选择器常常用于建立派生选择器。和一样,也可被用作派生选择器。

文章大纲来源:【Day 3】HTML复习 + CSS基础

初识CSS

入门CSS

初识CSS
层叠样式表(Cascading Style Sheets),即前端常说的CSS。

内容引用:CSS 简介

样式解决了什么问题?
HTML标签原本被设计为用于定义文档内容

通过使用标签来表达语义信息

那个时候的文档布局由浏览器实现,没有使用什么格式的标签。

但是当时主要的浏览器(Netscape 和 Internet Explorer)不断地将新的HTML标签和属性(比如字体颜色等)加入到HTML规范中,文档内容要独立于文档表示层越来越困难(各家都有各家的HTML书写属性规范,并且样式一般不统一)。

为了解决这个问题,万维网联盟(W3C)在HTML 4.0 之外创造出样式(Style)。

样式表如何提高工作效率?
样式表(Style Sheets)定义如何显示 HTML 元素

样式通常保存在外部的.css文件中,并且可以被多个.html文件所引用,所以外部的样式表可以一处修改,多处协同影响

CSS的使用方法

一共有三种:

标签内属性定义


   ...
内部定义

外部定义


  
/* style.css */
body {
  background: red;
}

外部定义可以多个样式表,书写多个标签引用即可。

那“层叠”指的是什么?
样式表允许多种方式规定样式信息。

HTML元素属性中

HTML的头元素中

外部的CSS文件中

同一个文档引用多个外部样式表

那么就容易遇到一个问题:“当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?”

这就是一种层叠了,即多重样式将层叠为一个

在这个层叠过程中,就需要一种层叠次序,来选择最后到底选择哪一个样式:

最高 —— 内联样式,即 HTML 元素内部

高 —— 内部样式表,即标签内部

中 —— 外部样式表

最低 —— 浏览器缺省样式

拥有高次序的样式会覆盖低次序的样式定义。

入门CSS 基础语法
CSS规则 由两个主要部分构成:选择器,以及声明
selector {
  declaration1;
  declaration2;
  ...
  declarationN;
}

选择器(selector)用于选择需要改变的 HTML 元素

声明(declaration)定义需要改变的属性和值,每条声明由一个属性和一个值组成(property: value)。

例如:

h1 {
  color: red;
  font-size: 14px;
}

元素内的文字颜色定义为红色,同时字体大小设置为14像素。

内容引用:CSS 基础语法

语法补充

除了基础语法,还有一些需要补充的内容。

内容引用:CSS 高级语法

选择器分组
被分组的选择器可以分享相同的声明。
h1,h2,h3,h4,h5,h6 {
  color: green;
}

使用逗号将需要分组到一组的选择器连接在一起即可。

样式继承
根据CSS,子元素从父元素继承属性。
body {
  font-family: Verdana, sans-serif;
}

上述规则说明,元素将使用Verdana字体(如果访问者系统中有的话)。

通过CSS继承,子元素将继承最高级元素(上面的例子是)所拥有的属性。这里的子元素指的就是在标签内声明的那些所有标签(其实并不一定是所有,具体取决于浏览器支持度)。

但是在使用CSS继承规则时,如果不希望一个特定子元素继承该CSS,则再说明一条特殊规则来覆盖即可(这部分涉及到选择器优先级问题,将在后面说明)。

body {
  font-family: Verdana, sans-serif;
}
p {
  font-family: Times, "Times New Roman", serif;
}
CSS 派生选择器
依据元素的位置关系来定义样式。

CSS1称其为上下文选择器(contextual selectors),CSS2称其为派生选择器。

例子:

li strong {
  font-style: italic;
  font-weight: normal;
}

我是粗体字,不是斜体,因为这个规则对我不起作用

  1. 我是斜体字。这是因为 strong 元素位于 li 元素内。
  2. 我是正常的字体。

只有 li 元素中的 strong 元素的样式为斜体字,这样无需为需要修饰的 strong 元素多带带定义 class或者id,代码更加简洁。

派生选择器还有更加深入的内容:

CSS 后代选择器

CSS 子元素选择器

CSS 相邻兄弟选择器

内容引用:CSS 派生选择器

CSS id选择器
为标有 特定id 的 HTML 元素指定特定的样式。

id选择器以"#"来定义。

#red { color: red; }
#green { color: green; }

这个段落是红色。

这个段落是绿色。

之所以叫特定的,就是因为 id属性 只能在每个HTML文档中出现一次

在现在布局中,id选择器常常用于建立派生选择器

#sidebar p {
  ...
}

样式只会应用于出现在id是sidebar的元素内的段落。

内容引用:CSS id 选择器

CSS 类选择器

类选择器的功能可以简单看成是:能给多个元素相同id的id选择器,只不过这里不再是用id了,而是用class。

在CSS中,类选择器以一个点号显示。
.center {
  text-align: center;
}

所有拥有center类的HTML元素都会应用这个样式。

This heading will be center-aligned

This paragraph will also be center-aligned.

注意:类名的第一个字符不能是数字,否则无法在 Mozilla 或 Firefox 中起作用。

和 id 一样,class 也可被用作派生选择器。
.sidebar p {
  ...
}

内容引用:CSS 类选择器

CSS 属性选择器
对带有指定属性的 HTML 元素设置样式,不仅限于 class 和 id 属性。

注意:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

属性选择器:

/* 带有 title 属性的所有元素 */
[title] {
  color: red;
}

属性和值选择器:

/* title="W3School" 的所有元素 */
[title=W3School] {
  border: 5px solid blue;
}

如果一个属性有多个值,想要选中这样的元素:

/* 适用于由空格分隔的属性值 */
[title~=hello] {
  color: red;
}
/* 适用于由连字符分隔的属性值 */
[lang|=en] {
  color: red;
}

这种方法的一个应用是设置表单的样式:

input[type="text"] {
  ...
}
input[type="button"] {
  ...
}
...

内容引用:CSS 属性选择器

个人静态博客:

气泡的前端日记: https://rheabubbles.github.io

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117339.html

相关文章

  • 前端菜鸟笔记 Day-3 CSS基础

    摘要:派生选择器依据元素的位置关系来定义样式。称其为上下文选择器,称其为派生选择器。在现在布局中,选择器常常用于建立派生选择器。和一样,也可被用作派生选择器。 文章大纲来源:【Day 3】HTML复习 + CSS基础 初识CSS 入门CSS 初识CSS 层叠样式表(Cascading Style Sheets),即前端常说的CSS。 内容引用:CSS 简介 样式解决了什么问题? HTML...

    DangoSky 评论0 收藏0
  • 前端菜鸟笔记 Day-4 CSS布局

    摘要:元素框从文档流完全删除,并相对于其包含块定位。简单来说就是,元素不再占用任何文档流的空间,只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短,使行框围绕浮动框,所以创建浮动框可以使文本围绕图像。 文章大纲来源:【Day 3】HTML复习 + CSS基础 CSS框模型 宽度和高度 内边距 外边距 CSS定位 浮动 CSS框模型 内容引用:CSS 框模型概述 CSS 框模...

    go4it 评论0 收藏0
  • 前端菜鸟笔记 Day-4 CSS布局

    摘要:元素框从文档流完全删除,并相对于其包含块定位。简单来说就是,元素不再占用任何文档流的空间,只剩下相对于包含块的定位显示。行框和清理浮动框旁边的行框会被缩短,使行框围绕浮动框,所以创建浮动框可以使文本围绕图像。 文章大纲来源:【Day 3】HTML复习 + CSS基础 CSS框模型 宽度和高度 内边距 外边距 CSS定位 浮动 CSS框模型 内容引用:CSS 框模型概述 CSS 框模...

    Honwhy 评论0 收藏0
  • Web前端开发学习推荐--菜鸟必看

    Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段:前端基础(HTML / CSS / JavaScript / jQuery)初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!(表单标签)html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

    JerryWangSAP 评论0 收藏0
  • Web前端开发学习推荐--菜鸟必看

    Web前端开发是创建Web页面或app等前端界面呈现给用户的过程。第一阶段:前端基础(HTML / CSS / JavaScript / jQuery)初识HTML+CSS【学习笔记】HTML基础完结篇html基础知识——标签详解html基础知识——与用户交互!(表单标签)html基础知识——css样式①史上最全Html和CSS布局技巧面试题汇总 HTML+CSS篇CSS 最核心的几个概念纯HTM...

    shadajin 评论0 收藏0

发表评论

0条评论

mingzhong

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<