时间戳

首页 > 技术文章 > CSS小记

CSS小记

newcheer 2021-01-16 19:29 原文

CSS小记

1.CSS简介

CSS（Cascading Style Sheet）层叠样式表；决定了如何显示HTML元素；由W3C创造

1. 特点

  1. 样式通常储存在样式表中
  2. 外部样式表通常存储在 css文件中
  3. 多个样式定义可层叠为一

2. 引入方式

  1. 行内式：即标签中用style标签设定css样式（不推荐）

  2. 内嵌式：在成对的head标签中嵌入style标签（对于多个网页，若修改样式麻烦）

  3. 导入式

    将一个独立的.css文件引入html文件中，导入式使用css规则引入外部css文件

    <head>
	<style type="text/css">
		@import"mystyle.css";
	</style>
</head>

    缺点：导入式会在整个网页装载完后再装载css文件；这就造成了一个问题

    ​ 若网页比较大则会出现先显示无样式的页面，闪烁一下之后，再出现网页的样式

  4. 链接式

    此方式 也是将一个.css文件引入到html文件中，但它与导入式不同的是使用html规则引入外部css文件

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

    优势：在网页文件主体装载前装载完成，显示出的网页一开始就是带样式效果的

3. 层叠次序（优先级）

问：当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

答：一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字4拥有最高优先级

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表(位于head标签内部）
  4. 内联样式（在html文档的元素标签内部）

2. CSS语法

1. 基础语法

  1. 简介

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

    选择器通常是您需要改变样式的html元素

    每一条声明由一个属性和一个值组成

  • 注意:

    1. 若值为若干单词，则要给值添加引号

      p {font-family:"sans serif"}

    2. css 对大小写不敏感；注意空格以便编辑

      body {
	color: #0000;
	margin: 0;
	padding: 0;
}

2. 高级语法

1. 选择器分组

h1,h2,h3,h4,h5,h6{   /*用逗号隔开*/
	color:green;
}

2.继承

子元素从父元素继承属性

body {
    font-family:Verdana,sans-serif;
}
/*body里面的所有子元素都使用 Verdana字体*/

若要摆脱继承，可以独立创建一个针对某标签的特殊规则

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

3. 选择器分类

1. id 选择器
<html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            #red {color: red;}
            #green {color: green;}
        </style>
    </head>
    <body>
        <p id="red">这个段落是红色</p>
        <p id="green">这个段落是绿色</p>
    </body>
</html>
2. class 选择器
<html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            .center {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1 class="center">
        	This heading will be center-aligned
        </h1>
        
        <p class="center">
        	This paragraph will also be center-aligned
        </p>
    </body>
</html>

class选择器和派生选择器

.fancy td {
    color: #f60;
    background: #666
}
/*在上述列子中，类名为fancy的更大的元素内部的表格单元都会以灰色背景显示橙色文字
	（名为fancy的更大元素可能是一个表格或div）*/

元素也可以基于它们的类而被选择

td.fancy{
    color: #f60;
    background: #666; 
}
<!--在上述列子中，类名为fancy的表格单元将是带有灰色背景的橙色文字
	仅仅作用于td元素下的.fancy类-->
3. 派生选择器

通过依据元素在其位置的上下文关系来定义样式，使标记更加简洁

<html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            li strong {
                font-style: italic;
                font-weight: normal;
            }
        </style>
    </head>
    <body>
        <p>
            <strong>
            	我是粗体字
            </strong>
        </p>
        <ol>
            <li>
                <strong>
                	我是斜体字，这是因为我是在li列表中
                </strong>
            </li>
            <li>
            	我是正常字体
            </li>
        </ol>
    </body>
</html>

id选择器和派生选择器

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

<html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <style type="text/css">
            #sidebar p {
                font-style: italic;
                text-align: right;
                marign-top: 0.5em;
                color:red;
            }
        </style>
    </head>
    <body>
        <p id="sidebar">这个段落是红色</p>
        <p id="green">这个段落是绿色</p>
    </body>
</html>
4. 属性选择器

对带有指定属性的html元素设置样式

[title] {
	color: red;
}

属性和值选择器（单个值）

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

属性和值选择器（多个值）

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<style type="text/css">
[title~=hello]       /*适用于由空格分隔的属性值*/
{
color:red;
} 
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />

<h1>无法应用样式：</h1>
<h2 title="world">Hello world</h2>
<p title="student">Hello W3School students!</p>
</body>
</html>

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<style type="text/css">
[lang|=en]				/*适用于由连字符分隔的属性值*/
{
color:red;
}
</style>
</head>

<body>
<h1>可以应用样式：</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />

<h1>无法应用样式：</h1>
<p lang="us">Hi!</p>
<p lang="zh">Hao!</p>
</body>
</html>

常用场景：设置表单的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
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;
}
</style>
</head>
<body>

<form name="input" action="" method="get">
<input type="text" name="Name" value="Bill" size="20">
<input type="text" name="Name" value="Gates" size="20">
<input type="button" value="Example Button">

</form>
</body>
</html>
5. 后代选择器

后代选择器亦包含选择器；可以选择作为某元素后代的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
h1 em {color:red;}     /* 元素em为h1的后代；两元素的层次间隔是无限的 */
</style>
</head>

<body>
<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>
</body>
</html>
6. 子元素选择器

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，用此选择器

子结合符( > )

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 > strong {color:red;}  
/*这个规则会把第一个h1下面的两个strong元素内容变红色，其它则不受影响*/
</style>
</head>

<body>
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>
7. 相邻兄弟选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可用此选择器

相邻兄弟结合符（ + ）

注意：用一个结合符只能选择两个相邻兄弟中第二个元素

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
/*上面这个选择器只会把列表中的第二个和第三个列表项变为粗体;第一个列表项不受影响*/
</style>
</head>

<body>
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>
</body>
</html>

结合其它结合符例子

html>body table + ul{
    margin-top: 20px;
}
/*解释：选择紧接在table元素后的所有兄弟ul元素，该table元素包含在一个body元素中，body元素本身也是html元素的子元素*/

4. 伪类

css伪类 （ pseudo-classes）用于 向某些选择器添加特殊 的效果

  1. 语法

    selector/selector.class : pseudo-class{
	property: value;
}

  2. 锚伪类

    链接的不同状态分别以不同的方式显示（对大小写不敏感）

    a:link {color: #FF0000}			/*未访问的状态*/
a:visited {color: #00FF00}		/* 已访问的状态*/
a:hover {color: #FF00FF}		/*鼠标移动到链接上的状态*/
a:active {color:#0000FF}		/*选定的链接*/

/*注意顺序，必须按照上面的顺序，否则无效*/

  3. 伪类与css类配合使用

    a.red : visited{
    color:#FF0000;
}
<a class="red" href="css_syntax.asp">CSS Syntax</a>

/*假如上面的列子中的链接被访问过，那么它将显示为红色*/

5. 伪元素

伪元素（pseudo-element）用于向某些选择器设置特殊效果

  1. 语法

    selector/selector.class : pseudo-element{
	property: value;
}

  2. after伪元素

    可以在元素的内容后面插入新内容

    <!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<style type="text/css">
h1:before {
    content:url(/i/w3school_logo_white.gif)
}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 content 属性。
</body>
</html>

    效果：

  3. 反之before伪元素是插在元素内容前面

3. 常用CSS

后续跟进……

推荐阅读