CSS学习笔记

最新推荐文章于 2024-05-30 14:49:04 发布

CoderRuL

最新推荐文章于 2024-05-30 14:49:04 发布

阅读量142

点赞数 3

分类专栏：学习笔记文章标签： CSS

本文链接：https://blog.csdn.net/qq_43472474/article/details/98607072

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

博主声明：
本文由博主luoru_LR原创，请多支持与指教。
转载请在开头附加本文链接及作者信息，并标记为转载。
博主主页

CSS概述

CSS指层叠样式表（Cascading Style Sheets）
样式定义如何显示HTML元素
样式通常存储在样式表中
把样式加到HTML4.0中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式表可以层叠为一

样式表层叠次序
一般而言，所有的样式表会根据下面的规则层叠于一个新的虚拟样式表中，其中第4种拥有更高的优先权。

浏览器的缺省设置
外部样式表
内部样式表（位于head标签内部）
内联样式（在HTML元素内部）

CSS语法
CSS规则由两个主要的部分构成：选择器、以及一条或多条声明）
选择器通常是需要改变样式的HTML元素。
每条声明由一个属性和一个值构成。属性（property）是希望设置的样式属性（style attribute），每个属性有一个值，属性和值被冒号分开（如果值为若干单词，则要给值加引号）。

selector {property: value}

选择器的分组
可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。例如下面的例子中，对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

派生选择器
通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。
在 CSS1 中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器。派生选择器允许根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器，可以使 HTML 代码变得更加整洁。
比方说，如果希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

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

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 “#” 来定义。
例如：

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

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

类选择器
类选择器与ID选择器很相似，在 CSS 中，类选择器以一个点号显示：

.center {text-align: center}

在下面的 HTML 代码中，h1 和 p 元素都有 center 类。这意味着两者都将遵守 “.center” 选择器中的规则。

<h1 class="center">
This heading will be center-aligned
</h1>

<p class="center">
This paragraph will also be center-aligned.
</p>

属性选择器
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
下面的例子为带有 title 属性的所有元素设置样式：

[title]
{
color:red;
}

属性和值选择器
下面的例子为 title=“luoru” 的所有元素设置样式：

[title=luoru]
{
border:5px solid blue;
}

属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] { color:red; }

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}