CSS基础与高级技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41696334/article/details/104173912

CSS基础简介及其他

在学习css之前应该对HTML和XHTML 有基本了解。

CSS概述

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

出现契机

HTML标签原本设计为用于定义文档的内容，文档的布局由浏览器自动完成。但随着新的HTML标签和属性添加到HTML规范中，创建文档内容清晰独立与文档表现层的站点变得越来越困难。顺应需求<style>出现了。

样式表极大得提高了工作效率

样式表定义如何显示HTML元素，样式通常保存在外部的.css文件中。仅通过编辑一个简单的CSS文档，外部样式表就可以改变所有页面的布局和外观。
除了可以同时改变网站的所有元素css还可以控制任意标签改变样式，这极大的提高了工作效率。

多重样式层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头部，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表

层叠次序

一般而言，所有的样式会根据下面的规则层叠与一个新的样式表中，其中 数字4 拥有最高的优先权。
1. 浏览器缺省设置
2. 外部样式表
3. 内联样式表（位于标签内部）
4. 内联样式（在HTML元素内部）

CSS语法

css规定有两个主要部分构成：选择器，以及一条或多条声明。

selector {
	declaration1;
	declaration2; 
	... 
	declarationN; 
}

选择器通常是您需要改变样式的HTML元素。
每条声明由一个属性和一个值组成。
属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值，属性和值被冒号分开。

selector {	
	property: value;
}

请用花括号来包围声明
如果值为多个，则要给值加分号
为了提高可读性，每行应该只描述一个属性
css在浏览器工作时不会受到空格和大小写影响，但是在涉及与HTML一起工作时，class和id名称是对大小写敏感的。

例子：

下面代码的作用是将h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素。

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

值的不同写法和单位

十六进制的颜色值

p { 
	color: #ff0000; 
}

css缩写形式

p {
	color: #f00; 
}

两种方法使用RGB值

p { 
	color: rgb(255,0,0); 
}

p { 
	color: rgb(100%,0%,0%); 
}

注意：当使用RGB百分比时，即使当值为0时也要血百分比符号，像素形式则不用写单位。

选择器的分组

我们可以对选择器进行分组，这样被分组的选择器就可以共享相同的声明。
用逗号将需要分组的选择器分开。

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

样式的继承

通过css继承，子元素将继承最高级元素（假设是<body>）所有的属性（假设这些子元素有<p>、<td>、<ul>、<ol>、<li>、<dl>、<dt>和<dd>）。

body {
	font-family: Verdana, sans-serif;
}

但是对于一些老旧的浏览器不能理解继承。我们就必需对所有子元素进行“选择器声明”。

body  {
	font-family: Verdana, sans-serif;
}

p, td, ul, ol, li, dl, dt, dd  {
	font-family: Verdana, sans-serif;
}

假设不希望所有子元素都被继承，我们可以创建一个针对其的特殊规则，这样就会摆脱父元素的规则

body  {
	font-family: Verdana, sans-serif;
}

td, ul, ol, li, dl, dt, dd  {
	font-family: Verdana, sans-serif;
}

p  {
	font-family: Times, "Times New Roman", serif;
}

CSS 派生选择器

派生选择器允许根据上下文关系来确定某个标签样式。比如，你希望列表中的strong元素变成斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

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

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

👇运行结果👇

上面例子中，只有<li>元素中的<strong>元素的样式为斜体字，无需为<strong> 元素定义特别的 class或id。

CSS id选择器

id选择器可以给标有特定id的HTML元素指定特定的样式
id选择器以“#”来定义
id属性只能在每个HTML文档中出现一次。

#red {
	color:red;
}

#green {
	color:green;
}

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

👇运行结果👇

id选择器和派生选择器

现代布局中，id选择器常常用于建立派生选择器

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
}

上面的样式只会应用于出现id是sidebar的元素的段落
即使被标注为sidebar的元素只能在文档中出现一次，这个id选择器作为派生选择器也可以被使用很多次👇

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
}

#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
}

在上面的样式中sidebar内的<p>元素和<h2>元素得到了处理

CSS 类选择器

类选择器可以给标有特定class的HTML元素指定特定的样式
在css中，类选择器以一个点号显示
类名的第一个字符不能使用数字

.center {
	text-align: center;
}

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

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

👇运行结果👇

CSS 属性选择器

对带有指定属性的HTML元素设置样式，而不仅限于class和id属性

[title]{
	color:red;
}

上面的样式中为带有title属性的所有元素设置样式

选择器	描述
`[attribute]`	用于选取带有指定属性的元素
`[attribute=value]`	用于带有指定属性和值的元素
`[attribute~=value]`	用于选取属性之中包含指定词汇的元素
`[attribute\|=value]`	用于选取带有以指定值开头的属性值的元素，该值必需是整个单词
`[attribute^=value]`	匹配属性值以指定值开头的每个元素
`[attribute$=value]`	匹配属性值以指定值结尾的每个元素
`[attribute*=value]`	匹配属性值中包含指定值的每个元素

插入样式表的方式

外部样式表

最理想的选择
外部样式表可以在任何文本编译器中进行编辑。文件不能包含任何的html标签。样式表应该以 .css扩展名进行保存
每个页面使用<link>标签链接到样式表，<link>标签在文档的头部。

<head>
	<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

浏览器会从文件mystyle.css中读到样式声明

内部样式表

当单个文档需要特殊样式时，使用内部样式表。
使用<style>标签在文档头部定义内部样式表。

<head>
	<style type="text/css">
  		hr {color: sienna;}
  		p {margin-left: 20px;}
  		body {background-image: url("images/back40.gif");}
	</style>
</head>

内联样式

当某个样式仅需在一个元素上应用一次时使用。
使用style属性在标签内使用样式。style属性可以包含任何css属性

<p style="color: sienna; margin-left: 20px">
This is a paragraph</p>

当某些元素被同样的选择器定义时，那么属性将从更具体的样式表中被继承过来。
内联样式>内部样式表>外部样式表

CSS基础简介及其他

CSS基础简介及其他

CSS概述

出现契机

样式表极大得提高了工作效率

多重样式层叠为一个

层叠次序

CSS语法

例子：

值的不同写法和单位

十六进制的颜色值

css缩写形式

两种方法使用RGB值

选择器的分组

样式的继承

CSS 派生选择器

CSS id选择器

id选择器和派生选择器

CSS 类选择器

CSS 属性选择器

插入样式表的方式

外部样式表

内部样式表

内联样式