CSS教程： CSS（上）

CSS(上)

什么是CSS

Cascading Style Sheets 简称 层叠样式表

官方描述：
用于描述用标记语言编写的文档的外观和格式。 虽然最常用于更改用HTML和XHTML编写的网页和用户界面的样式，但该语言可以应用于任何类型的XML文档，包括纯XML，SVG和XUL。 与HTML和JavaScript一起，CSS是大多数网站使用的基础技术，用于创建具有视觉吸引力的网页，Web应用程序的用户界面以及许多移动应用程序的用户界面。

人话：
层叠样式表也就是CSS，是你在HTML之后应该学习的第二门技术。

HTML用于定义内容的结构和语义，CSS用于设计风格和布局。比如，您可以使用CSS来更改内容的字体、颜色、大小、间距，将内容分为多列，或者添加动画及其他的装饰效果，进而对页面的版面布局和外观样式的美化。

用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS 不需要编译,可以直接由浏览器执行(属于浏览器解释型语言)。

例：

h1 {
 color: red;
 font-size:25px;
}
h1选择器  color  属性   red属性值

基础

• 基础选择器
• 引入方式
• 书写格式
• 文字属性
• 盒子模型
• Emmet语法

1、HTML的局限性

如果直接利用html页面书写页面，页面的美观达不到要求，如果要添加一些简单样式利用html属性添加会是代码复杂臃肿，所以我们要使用css进行页面的美化；

2、CSS作用以及初识

Css的作用：
主要是用来进行页面的版面布局和外观样式的美化；

使用css的原理：
能够将结构html和样式css分离书写，简化代码，提高可阅读性；

3、css引入方式

01 行内样式：

直接在标签的开始标签身上添加一个 style=“”属性，然后在引号里面书写css属性和属性值即可，没有实现结构和样式分离，尽量不用

02 内部样式：

书写在head标签里面，title标签下面，以一对style标签包裹，实现了结构和样式的半分离；

03 css外部链接：

外部链接的步骤：

1. 新建：.css格式的css文件，直接书写选择器以及css样式；
1. 引用：利用link标签引入新建的css文件，要配合link的三个属性  rel关系，type文件类型(可以不写) ，href文件路径； [https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link)

使用外部链接的好处：

1. 实现了结构和样式的完全分离，代码简介，可读性强；
1. 一个css样式可以共享，如果两个页面的标签样式完全一致，就可以使用同一个css文件，然后分别连接过来即可；

4、CSS 书写格式

选择器 { 属性1:属性值1;  属性2:属性值2;   属性3:属性值3；…… }选择器：指定CSS样式作用的HTML对象(要更改样式的标签)，花括号内是对该对象设置的具体样式。属性和属性值：以键值对的形式出现，属性和属性值之间用英文的冒号 ’  :  ’ 链接；

5、CSS选择器

选择器的作用：把想要选择的元素标签选择出来。选择器的分类：基础选择器和复合选择器

   基础选择器

a. 标签选择器

以标签名称命名的选择器，可以把将页面中所有的同类元素全部选中；注意：如果我们选中了改标签，页面中所有的该标签就会被全部选中，所有不建议大家直接使用标签选择器；

a,p,div,li,ul{
    color:red;
}
/*页面上所有的a,p,li,ul都会将字体颜色设置为红色，不过优先级最低*/

b. 类选择器

使用方式：在css里面用点“  .  ”   +  类名称 +{ css键值对 } 进行样式定义;
   调用：在html里面哪个标签需要，就在开始标签敲空格class=“类名称”进行调用； 命名规则：不能用纯数字、不能数字开头的、不能中文命名，建议不要用特殊符号；可以用英文单词或者拼音                         命名，可以以数字结束多类名调用：一个标签身上只能使用一个class，如果想要调用多个类名我们可以在一个class里面直接以空格                          隔开直接书写另一个类名称即可；

<p class="test">我爱你</p>
<style>
    .test{
        color:red;
    }
    /*类选择器通过class属性来绑定一个类名，样式通过. + ‘class’来实现关联，优先级低于id选择器*/
  /* 工程实践中我们一般推荐使用类选择器*/
</style>

c. id 选择器

类选择可以重复使用，只要样式一致就可以重复的使用同一个类名称；
id选择器是唯一的不能重复使用，一个id名称一个页面只能出现一次；

<p id="test">如果说命运是应许之地，那么在这一刻，你并不知道未来会如何勾连</p>
<style>
    #test{
        color:red;
    }
    /*id选择器通过id属性来绑定一个唯一id，样式通过# + ‘id’来实现关联，优先级较高*/
</style>

d. 通配符选择器 *

一个表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；
实际工作中用的最多的是下面的代码{ margin: 0; padding: 0;  }

e. 属性选择器

<a class="test" src='/test.html'>一生须惜少年时，那能白首下书帷。</a>
<style>
   [src^="test"]{
       color:blue;
   }
   .test[src]{
       color:red;
   }
   /*属性选择器通过[attr=*]来选择具有该属性的元素，属性值支持通配符(不做具体详解)形式，优先级较低，多种选择器可以结合使用，上例中，后者优先级高于前者，所以呈现的字体为红色。*/
</style>

f. 子元素和后代元素选择器

<p>我不会变色(穿越人海，只为与你相拥)</p>
<ul>
   <li>我是子元素<span>我是子子元素(梦魂纵有也成虚 那堪和梦无)</span></li>
   <li>我是第二个子元素(我心匪石，不可转也)</li>
   <li>
       <li>我是li里面的li(夜夜除非，好梦留人睡)</li>
   </li>
</ul>
<p>我会变红</p>
<style>
   ul li{
       margin-left:20px;
   }
   /*通过空格隔开的方式选择所有子元素，这样，ul里面的所有li都会应用到左边距20px的样式,包括li里面的li*/
   ul>li{
       padding-left:20px;
   }
   /*通过选择器 > 选择器 来选择直接子元素，意思是说，只有第一级的li会被应用成左内边距20px,而li里面的li不会被应用到。*/
   ul + p{
       background-colo:red;
   }
   /*通过 选择器 + 选择器 来选择兄弟元素，这样让下面的p元素的背景色为红色，而第一个p标签的背景色不会变。*/
</style>

https://codepen.io/AlexZ33/pen/YzzRPBW

这里着重实践下 相邻兄弟选择器 常用场景

https://codepen.io/AlexZ33/pen/qBBeeBz

g. 伪类选择器

• px
• em
• rem
• 伪类专门用来表示元素的一种的特殊的状态。 比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框。 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类。
• :link,表示普通的链接(没访问过的链接)
• :visited,表示访问过的链接
• :hover,表示鼠标移入的状态
• :active,表示的是超链接被点击的状态
• :focus,表示文本框获取焦点     

说明：

•  ps: :hover和:active也可以为其他元素设置(ie6不支持)
• 普通标签支持:hover,:focus,其他伪类只有一些特定的标签才支持，比如说：a标签支持:visited,:active,link；button支持:active,:focus。举例：

<a class="test" src='/test.html'>我是连接</a>
<button>点我我就绿</button>
<style>
   a:link{
       color:blue;
   }
   /*连接未被访问过，为blue颜色*/
   a:visited{
       color:red;
   }
   /*访问之后，变成红色*/
   a:hover{
       font-size:40px;
   }
   /*鼠标一上去，字体变大*/
   button:focus{
       color:green;
   }
   /*点击按钮，按钮聚焦，会变成绿色*/
   button:active{
       color:red;
   }
   /*点击按钮的过程中，按钮颜色会变红*/
</style>

https://codepen.io/AlexZ33/pen/abbQONO

H. 伪元素选择器

• p:first-letter

作用：选择p中第一个字符

• p:first-line,选择p中的第一行
• :before,表示元素最前边的部分， 一般before都需要结合content这个样式一起使用，通过content可以向before或after的位置添加一些内容
• :after,表示元素的最后边的部分

简单用法：https://codepen.io/AlexZ33/pen/WNNYvoa?&editable=true

复杂实践：https://codepen.io/AlexZ33/pen/XWWybaJ常用的HTML和CSS content属性特殊字符归纳

使用before伪元素实现面包屑

i. 子元素伪类选择器

• :first-child 可以选中第一个子元素
• :last-child 可以选中最后一个子元素
• :nth-child(XXX) 可以选中任意位置的子元素,该选择器后边可以指定一个参数，指定要选中第几个子元素,even 表示偶数位置的子元素,odd 表示奇数位置的子元素。
• :first-of-type、:last-of-type、:nth-of-type和:first-child这些非常的类似，只不过child，是在所有的子元素中排列，而type，是在当前类型的子元素中排列

https://codepen.io/AlexZ33/pen/dyyQaPG

j. 

6、CSS选择器权重

权重主要分为 4 个等级：

• 第一等：代表内联样式，如: style=""，权值为1000
• 第二等：代表ID选择器，如：#content，权值为100
• 第三等：代表类，伪类和属性选择器，如.content，权值为10
• 第四等：代表类型选择器和伪元素选择器，如div p，权值为1

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>选择器权重</title>
    <meta name="description" content="选择器权重">
    <meta name="author" content="Way Lau, www.waylau.com"/>
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">

    <style type="text/css">
        #redP p {
            /* 权值 = 100+1=101 */
            color: #F00; /* 红色 */
        }

        #redP .red em {
            /* 权值 = 100+10+1=111 */
            color: #00F; /* 蓝色 */

        }

        #redP p span em {
            /* 权值 = 100+1+1+1=103 */
            color: #FF0; /*黄色*/
        }
    </style>
</head>
<body>
<div id="redP">
    <p class="red">red
        <span><em>em red</em></span>
    </p>

    <p>red</p>
</div>
</body>
</html>

最终页面效果如下：https://codepen.io/AlexZ33/pen/QWWVYpR

类似示例：

无法改变颜色的标签

7、CSS优先级

遵循如下法则：

• 选择器都有一个权值，权值越大越优先；
• 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
• 创作者的规则高于浏览者：即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式；
• 继承的 CSS 样式不如后来指定的 CSS 样式；
• 在同一组属性设置中标有!important规则的优先级最大
• !important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>!important 用法</title>
    <meta name="description" content="!important 用法">
    <meta name="author" content="Way Lau, www.waylau.com"/>
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">

    <style>
        .test {
            color: #f00 !important;
            color: #000;
        }

        .test2 {
            color: #f00 !important;
        }

        .test2 {
            color: #000;
        }

        .test3 {
            color: #000;
        }

        .test3 {
            color: #f00;
        }
    </style>
</head>
<body>
<div class="test">同一条样式内，!important 优先级高</div>
<div class="test2">在分散的样式条目内，!important 优先级高</div>
<div class="test3">没有被覆盖</div>
</body>
</html>

https://codepen.io/AlexZ33/pen/dyyqaVZ

8、数值与单位

9、背景和边框

背景知识

• border

  • https://www.runoob.com/css/css-border.html
• border-radius  –>  [border-radius(圆角)]()[-Css3演示]()  –> https://codepen.io/AlexZ33/pen/YzzRwLy
• box-shadow   –>  Box Shadow(阴影)-Css3演示  –>
• border-image

• background ：

  • https://www.w3school.com.cn/css/css_background.asp
  • https://www.runoob.com/css/css-background.html

注意：Internet Explorer 9+ 支持 border-radius 和 box-shadow 属性。Firefox、Chrome 以及 Safari 支持所有新的边框属性。 对于 border-image，Safari 5 以及更老的版本需要前缀 -webkit-。 Opera 支持 border-radius 和 box-shadow 属性，但是对于 border-image 需要前缀 -o-

1、半透明边框

假设我们想给一个容器设置一层白色背景和一道半透明的边框，我们最初的尝试可能是这样的：

border: 10px solid hsla(0, 0%, 100%, .5);
background: #fff;

除非你对背景和边框的工作原理非常地熟悉，否则展示出来的结果可能让你摸不着头脑，因为我们的背景会从它的半透明边框透上来。如下图所示：

解决方案

默认情况下，背景会延伸到边框所在的区域下层，即使你使用的是不透明的实色边框。幸运的是，在CSS3中，我们可以通过bakcground-clip属性来调整上述默认行为。这个属性的初始值是border-box，如果不希望背景侵入到边框所在的范围，我们可以把它的值设为padding-box，即：

border: 1px solid hsla(0, 0%, 100%, .5);
background: #fff;
background-clip: padding-box

https://codepen.io/AlexZ33/pen/rNBPGOj

2、多重边框

目前为止，我们大多数人可能用过(或滥用过)box-shadow来生成投影。不太为人所知的是，它还接受第四个参数(叫做扩张半径)，通过指定正值和负值，可以让投影面积加大或减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的投影其实就像一道实线边框：

background: yellowgreen;
box-shadow: 0 0 0 10px #655;

使用box-shadow的另一个好处是它支持逗号分隔语法，我们可以创建任意数量的投影(边框)

ackground: yellowgreen;
box-shadow: 0 0 0 10px #655, 0 0 0 15px deeppink;

需要注意的是，box-shadow是层层叠加的，第一层投影位于最顶层。因此，需要按照此规律调整扩张半径https://codepen.io/AlexZ33/pen/LYYXpvX

高级案例：https://alexz33.github.io/CSS3_demo/css3_picshadow.html

3、border实现三角形

用css画三角形很简单，就是将一个块元素宽高设置为0，然后给某一边设一个比较厚的宽度

利用盒子的均分原理，盒子都是矩形或者正方形，从形状的中心，向4个上下左右划分4个部分。

保证元素是块级元素，设置元素的边框，不需要显示的边框使用透明色transparent。

所以，如果你要一个向上或者向下的三角:border-left和border-right就是transparent，而border-bottom可见则三角向上，border-top可见则三角向下

https://codepen.io/AlexZ33/pen/MWWzMdm

4、圆角/阴影/过渡

9、文字文本样式

我们将详细介绍文本/字体样式的所有基本原理，包括设置文字的粗细，字体和样式，文字的属性简写，文字的对齐，和其他效果，以及行和字母间距。

用于样式文本的 CSS 属性通常可以分为两类，我们将在本文中分别观察。

• 字体样式: 作用于字体的属性，会直接应用到文本中，比如使用哪种字体，字体的大小是怎样的，字体是粗体还是斜体，等等。
• 文本布局风格: 作用于文本的间距以及其他布局功能的属性，比如，允许操纵行与字之间的空间，以及在内容框中，文本如何对齐。

可细致学习文章：

CSS中的文字样式涉及什么？

01 文字大小font-size

font-size文字大小，常用的单位是px像素，一般是有默认的字体大小16px，但是我们建议大家一开始就在body中设置一个默认大小；

02 文字字体设置font-family

• font-family取值可以取一个或者多个，如果取多个值要用英文的逗号隔开，表示先找第一个字体如果没有就往后面查找，依次类推；
• 如果是汉语的文字或英文单词之间有空格，都要要用英文状态的引号引起来；

font-family:Arial,”Microsoft Yahei”，“微软雅黑”；

unicode字体

在CSS中设置字体名称,可以直接写中文,但是在文件编码(GB2312, UTF-8等)不匹配时会产生乱码的错误.XP系统不支持类似微软雅黑的中文
方案一:可以用英文来代替
方案二:在CSS直接使用unicode编码来写字体名称可以避免这个错误,使用unicode写中文字体名称,浏览器可以正确的解析

03 文字的粗细设置font-weight            

加粗：font-weight:bold;       font-weight:700;   
不加粗：font-weight:normal;    font-weight:400;

04 文字的倾斜样式控制font-style

倾斜：font-style:italic;
不倾斜：font-style:normal;注意：实际工作中我们一般会使用font-style:normal;让em和i不倾斜；

05 字体的颜色控制 color

• 颜色取值：

a、直接写英文单词yellow red等等
       b、16进制表示#aabbcc或者#abc
c、rgb()如rgb(0，0，0)
d、rgba(),如rgba(0,0,0,0.5)a为透明度

• 常用测试颜色16进制：

黑色系列：#000； #333；  #666； #9999；
灰色系列：#ccc； #eee； #ddd； #dedede；
红色：#f00；

06 文字居中设置text-align

text-align有三个取值left、center、right, text-align只控制盒子里面的内容的对齐；文本居中：text-align:center;https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align

07 文本的行高设置line-height

line-height取值为数字，可以设置文字行与行之间的距离；
line-height:30px;   表示行高30px

08 文本的首行缩进 text-indent

text-indent首行缩进，取值为具体的像素值或者直接em，1em等于一个字的大小；

09 文本装饰线条修饰text-decoration

text-decoration:none; 没有线
text-decoration：underline；下划线
text-decoration:line-through; 中划线/删除线
text-decoration:overline;上划线注意：实际工作中我们用的最多的是没有线 text-decoration:none;，主要是给超链接a标签去除默认的下划线；一般放在css的最前面将页面所有a的样式都去除；

10 字体综合写法

font：是否倾斜   是否加粗   文字大小/ 行高   字体；font:  font-style  font-weight    font-size/line-height  font-family;注意:**

• 使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的；
• 实际工作中一般只用：font:文字大小   字体；

11 自定义字体@font-face

以前 CSS3 的版本，网页设计师不得不使用用户计算机上已经安装的字体。
使用 CSS3，网页设计师可以使用他/她喜欢的任何字体。
当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。
您所选择的字体在新的 CSS3 版本有关于@font-face规则描述。
您”自己的”的字体是在 CSS3 @font-face 规则中定义的。注意：Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体。
Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型)。
Chrome, Safari 和 Opera 也支持 SVG 字体/折叠。
Internet Explorer 同样支持 EOT (Embedded OpenType) 字体。
在 @font-face 规则中，您必须首先定义字体的名称(比如 FontAwesome )，然后指向该字体文件 fontawesome-webfont.woff 。

@font-face {
    font-family: 'FontAwesome';
    src: url('fonts/fontawesome-webfont.woff');
}

.font6 {
    font-family: 'FontAwesome', sans-serif;
    font-size: 14px;
    color: pink;
    line-height: 1.3em;
}

源码参见 https://gitee.com/turingitclub/css-learning/tree/dev/base中 base 目录下的 font.html

•  https://codepen.io/AlexZ33/pen/BaaqYGM
• https://codepen.io/AlexZ33/pen/LYYXMEX

12、格式化列表

<h2>Shopping (unordered) list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference,
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<ul>
  <li>Humous</li>
  <li>Pitta</li>
  <li>Green salad</li>
  <li>Halloumi</li>
</ul>

<h2>Recipe (ordered) list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference, 
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<ol>
  <li>Toast pitta, leave to cool, then slice down the edge.</li>
  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
  <li>Wash and chop the salad.</li>
  <li>Fill pitta with salad, humous, and fried halloumi.</li>
</ol>

<h2>Ingredient description list</h2>

<p>Paragraph for reference, paragraph for reference, paragraph for reference, 
paragraph for reference, paragraph for reference, paragraph for reference.</p>

<dl>
  <dt>Humous</dt>
  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
  <dt>Pitta</dt>
  <dd>A soft, slightly leavened flatbread.</dd>
  <dt>Halloumi</dt>
  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
  <dt>Green salad</dt>
  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
</dl>

现在，如果你去到例子的展示页面，并使用浏览器开发者工具查看那些列表元素，你会注意到若干个默认的样式预设值：

• <ul>  和  <ol>  元素设置margin的顶部和底部: 16px(1em) 0;和 padding-left: 40px(2.5em); (在这里注意的是浏览器默认字体大小为16px)。
• <li>  默认是没有设置间距的。   –>   怎样设置列表间距？
• <dl>  元素设置 margin的顶部和底部: 16px(1em) ，无内边距设定。
• <dd> 元素设置为： margin-left 40px (2.5em)。
• 在参考中提到的 <p>  元素设置 margin的顶部和底部: 16px(1em)，和其他的列表类型相同。

a、处理列表间距

/* General styles */

html {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
}

h2 {
  font-size: 2rem;
}

ul,ol,dl,p {
  font-size: 1.5rem;
}

li, p {
  line-height: 1.5;
}

/* Description list styles */


dd, dt {
  line-height: 1.5;
}

dt {
  font-weight: bold;
}

dd {
  margin-bottom: 1.5rem;
}

• 第一条规则集设置一个网站字体，基准字体大小为10px。 页面上的所有内容都将继承该规则集。
• 规则集2和3为标题、不同的列表类型和段落以及设置了相对字体大小(这些列表的子元素将会继承该规则集)，这就意味着每个段落和列表都将拥有相同的字体大小和上下间距,有助于保持垂直间距一致。
• 规则集4在段落和列表项目上设置相同的 line-height ，因此段落和每个单独的列表项目将在行之间具有相同的间距。 这也将有助于保持垂直间距一致。
• 规则集5-7适用于描述列表 – 我们在描述列表的术语和其描述上设置与段落和列表项相同的行高，以及 margin-bottom 为1.5 rem(与段落(p)和列表项目(li))相同。 再次强调一遍，这里很好地实现了一致性！ 我们还使描述术语具有粗体字体，因此它们在视觉上脱颖而出。

a、 列表特点样式

• list-style-type : 设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。
• list-style-position : 设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。
• list-style-image: 允许您为项目符号使用自定义图片，而不是简单的方形或圆形。

13、CSS样式化链接

当为 links 添加样式时, 理解利用伪类有效地建立链接状态是很重要的，以及如何为链接添加样式来实现常用的功能，比如说导航栏、选项卡。我们将在本文中关注所有这些主题。

第一件需要理解的事情是链接状态的概念，链接存在时处于不同的状态，每一个状态都可以用对应的 伪类 来应用样式:

• Link (没有访问过的): 这是链接的默认状态，当它没有处在其他状态的时候，它可以使用:link 伪类来应用样式。
• Visited: 这个链接已经被访问过了(存在于浏览器的历史纪录), 它可以使用 :visited 伪类来应用样式。
• Hover: 当用户的鼠标光标刚好停留在这个链接，它可以使用 :hover 伪类来应用样式。
• Focus: 一个链接当它被选中的时候 (比如通过键盘的 Tab  移动到这个链接的时候，或者使用编程的方法来选中这个链接 HTMLElement.focus()) 它可以使用 :focus 伪类来应用样式。
• Active: 一个链接当它被激活的时候 (比如被点击的时候)，它可以使用 :active 伪类来应用样式。

a. 默认样式

https://codepen.io/AlexZ33/pen/jOOQXpa

当你观察默认样式的时候，你也许会注意到一些东西:

• 链接具有下划线。
• 未访问过的 (Unvisited) 的链接是蓝色的。
• 访问过的 (Visited) 的链接是紫色的.
• 悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标。
• 选中 (Focus) 链接的时候，链接周围会有一个轮廓，你应该可以按 tab 来选中这个页面的链接 (在 Mac 上, 你可能需要使用_Full Keyboard Access: All controls_ 选项，然后再按下 Ctrl + F7 ，这样就可以起作用)
• 激活 (Active) 链接的时候会变成红色 (当你点击链接时，请尝试按住鼠标按钮。)

有趣的是，这些默认的样式与20世纪90年代中期浏览器早期的风格几乎相同。这是因为用户知道以及期待链接就是这样变化的，如果链接的样式不同，就会让一些人感到奇怪。不过这不意味着你不应该为链接添加任何样式，只是你的样式不应该与用户预期的相差太大，你应该至少：

• 为链接使用下划线，但是不要在其他内容上也用下划线，以作区分。如果你不想要带有下划线的链接，那你至少要用其他方法来高亮突出链接。
• 当用户悬停或选择 (hover 或者 focused) 的时候，使链接有相应的变化，并且在链接被激活(active) 的时候，变化会有一些不同。可以使用以下CSS属性关闭/更改默认样式：
• color 文字的颜色
• cursor 鼠标光标的样式，你不应该把这个关掉，除非你有非常好的理由。
• outline 文字的轮廓 (轮廓有点像边框，唯一的区别是边框占用了盒模型的空间，而轮廓没有； 它只是设置在背景图片的顶部)。outline 是一个有用的辅助功能，所以在把它关掉之前考虑清楚；你至少应该将悬停 (hover) 状态的样式同时应用到选中 (focus) 状态上。

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

• 记住这个顺序

这个顺序是重要的，因为链接的样式是建立在另一个样式之上的，比如第一个规则的样式会应用到所有后续的样式，如果当一个链接被激活 (activated) 的时候，它也是处于悬停 (hover) 状态的。如果你搞错了顺序，那么就可能不会产生正确的效果。要记住这个顺序

b 将样式应用到一些链接

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;     
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}

https://codepen.io/AlexZ33/pen/jOOQJwE

14、文本自动换行

• word-break

15、文本自动换行2

如果你碰到一个比自身容器长的文本，这个技巧对你很有用。在这个示例中，默认时，不管容器的宽度，文本都将水平填充。

16、 长单词与URL自动换行

17、使用服务端字体

• Web Font
• @font-face 

18、修改字体种类而保持字体尺寸不变

• font-size-adjust

19、文字效果

CSS3 文本效果是这样一个术语用来在正常的文本中实现一些额外的特性。
主要是两个属性的 CSS3 文本效果,如下:

• text-shadow
• word-wrap

注意:Internet Explorer 10, Firefox,Chrome, Safari, 和 Opera支持text-shadow 属性。所有的主流浏览器支持自动换行(word-wrap)属性。Internet Explorer 9及更早IE版本不支持 text-shadow 属性

text-shadow

文本阴影。 您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：

.text-shadow {
    text-shadow: 10px 10px 10px #6AAFCF;
}

word-wrap

换行。 CSS3中，自动换行属性允许您强制文本换行 – 即使这意味着分裂它中间的一个字：

.word-wrap {
    word-wrap: break-word;
    width: 150px;
    border: 1px solid #ff0000;
}

属性

属性	描述	CSS
hanging-punctuation	规定标点字符是否位于线框之外。	3
punctuation-trim	规定是否对标点字符进行修剪。	3
text-align-last	设置如何对齐最后一行或紧挨着强制换行符之前的行。	3
text-emphasis	向元素的文本应用重点标记以及重点标记的前景色。	3
text-justify	规定当 text-align 设置为 “justify” 时所使用的对齐方法。	3
text-outline	规定文本的轮廓。	3
text-overflow	规定当文本溢出包含元素时发生的事情。	3
text-shadow	向文本添加阴影。	3
text-wrap	规定文本的换行规则。	3
word-break	规定非中日韩文本的换行规则。	3
word-wrap	允许对长的不可分割的单词进行分割并换行到下一行。	3

源码

https://codepen.io/AlexZ33/pen/JjobjWB

12、盒子模型

所有的元素都被一个个的“盒子(box)”包围着

盒子类型

块级盒子(Block box) 和 内联盒子(Inline box)

在 CSS 中我们广泛地使用两种“盒子” —— 块级盒子 (block box) 和 内联盒子 (inline box)。这两种盒子会在页面流(page flow)和元素之间的关系方面表现出不同的行为:
一个被定义成块级的(block)盒子会表现出以下行为:

• 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
• 每个盒子都会换行
• width 和 height 属性可以发挥作用
• 内边距(padding), 外边距(margin) 和 边框(border) 会将其他元素从当前盒子周围“推开”

除非特殊指定，诸如标题(<h1>等)和段落(<p>)默认情况下都是块级的盒子。
如果一个盒子对外显示为 inline，那么他的行为如下:

• 盒子不会产生换行。
• width 和 height 属性将不起作用。
• 内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。

用做链接的 <a> 元素、 <span>、 <em> 以及 <strong> 都是默认处于 inline 状态的。
我们通过对盒子display 属性的设置，比如 inline 或者 block ，来控制盒子的外部显示类型。

常见block类型：

• div
• p

常见inline类型：

• span
• a

display

display CSS 属性指定了元素的显示类型，它包含两类基础特征：

• 用于指定元素怎样生成盒模型——
• 外部显示类型定义了元素怎样参与流式布局的处理，
• 内部显示类型定义了元素内子元素的布局方式。

/* <display-outside> values
外部显示类型 */
display: block;
display: inline;
display: run-in;

/* <display-inside> values
内部显示类型 */
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;

/* <display-outside> plus <display-inside> values */
display: block flow;
display: inline table;
display: flex run-in;

/* <display-listitem> values */
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/* <display-internal> values */
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/* <display-box> values */
display: contents;
display: none;

/* <display-legacy> values */
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/* Global values */
display: inherit;
display: initial;
display: unset;

block vs inline

示例1： https://codepen.io/AlexZ33/pen/WNNWLJV
示例2： 改变display属性 –> https://codepen.io/AlexZ33/pen/abbxPjw

示例3：

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容

inline-block

inline-block类型是CSS2.1中追加的一个盒模型。 

line-block类型属于block类型盒的一种，但是在显示时它具有inline类型盒的特点：

• div元素的样式代码中将display属性设定为“inline-block”，则与设置成”inline” 显示相同
• 修改对应的width，height， 发现， 两个inline-block类型宽度发生了变化，两个inline类型元素未变化

https://codepen.io/AlexZ33/pen/yLLrWaM

inline-block类型执行并列显示

   CSS2.1之前，如果要在一行并列显示多个block类型的元素，则需要使用float属性或者position属性,但是这样会使样式变得比较复杂。
   CSS2.1追加了inline-block类型，使并列显示多个block类型变得非常简单。

使用float属性将div元素并列显示：

https://codepen.io/AlexZ33/pen/WNNWBdo

使用inline-block将div元素并列显示

**https://codepen.io/AlexZ33/pen/QWWPRBp

默认情况下使用inline-block类型时并列显示的元素的垂直对齐方式可以通过vertical-align属性更改

使用inline-block显示水平菜单

CSS2.1之前，对于水平菜单的实现需要使用到float属性。
一般会利用ul列表和li列表

• li元素属于block类型下的list-item类型，因此如果需要让li元素并列显示，需要使用float属性

使用float属性显示水平菜单

https://codepen.io/AlexZ33/pen/pooBmmp

使用inline-block显示水平菜单

**https://codepen.io/AlexZ33/pen/abbxgoX

另外，还可以让a元素也属于inline-block类型，然后使用背景色，并指定宽度， 使a元素占据整个菜单。https://codepen.io/AlexZ33/pen/abbxgOM

怎么解决li之间的间隙

原因分析：

原因是：浏览器的默认行为是把inline元素间的空白字符(空格换行tab)渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度，所以你懂的…

解决方案：

方法一：既然是因为<li>换行导致的，那就可以将<li>代码全部写在一排

方法二：

li {
 float: left; 
}

inline-table

CSS2中新增的另一种盒类型： inline-table类型

https://codepen.io/AlexZ33/pen/GRRLbdE

 结果中表格前后的文字处于不同行中， 因为table元素属于block类型，所以不能和其他文字处于同一行，但如果将table元素修改成inline-block类型，就可以处于同一行了。

list-item类型

如果在display属性中将元素设定为list-item类型，可以将多个元素作为列表来显示，同时在元素的开头加上列表标记。https://codepen.io/AlexZ33/pen/vYYMqQx

run-in类型 & compact类型

表格相关类型

none类型

display: none

注意它和 visibility: hidden; 的区别

各个浏览器对各种类型支持情况

盒中容纳不下的内容显示

overflow属性

• overflow
• overflow-x & overflow-y
• text-overflow
• ::-webkit-scrollbar

对盒使用阴影

• box-shadow

指定针对元素的宽度与高度的计算方法

 CSS中组成一个块级盒子需要:

• Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
• Padding box: 包围在内容区域外部的空白区域； 大小通过 padding 相关属性设置。
• Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
• Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置

13、作业: 用css写一个网页

1、https://gitee.com/turingitclub/css-learning/tree/dev/task01  task1
2、 ie的盒子模型 和 chrome的盒子模型有什么不一样？

–>  参考文档 ： https://developer.mozilla.org/zh-CN/docs/Learn/CSS/Building_blocks/The_box_model

3、学习task2今天讲到的内容，照着代码

14、Emmet语法

• 标签名+tab键可以生成整个标签；例如：div 表示生成div标签；
• 标签数字+tab键可以按照数字生成对应的个数标签；例如：p3表示3生成3个p；
• 如果是父子级关系可以直接用>连接+tab：例如：div>p 表示div嵌套p标签；
• 如果是兄弟关系就直接用+加tab；例如：div+p 表示div和p标签是同级元素；
• 如果要写类名和id名称直接早标签后面跟. 和#即可；例如：div.box  === <div class=“box”></div>   div#box  === <div id=“box”></div> ；
• 如果想要生成有顺序的类名，直接在类名后面加$+数字；

     

• 如果想要生成带有内容的盒子，我们只需要在标签或者名称后面添加大括号{}里面写上内容
• w50 +tab  生成 width:50px;               h50 +tab  生成 height:50px;

VsCode中使用Emmet神器快速编写HTML代码

 参考阅读

• css学习路径
• css菜鸟教程
• MDN-CSS 介绍
• MDN-CSS如何工作
• MDN-CSS 语法
• MDN-选择器
• MDN-简单选择器
• MDN-属性选择器
• CSS第四级选择器

然后可以暂时跳过伪类选择器，开始重新仔细看文本相关的样式

• MDN-基本文本和字体样式

当然，你也可以选择阅读其它网站，比如W3School等上面相应的内容。

• 选择器的分组与继承
• 派生选择器
• 伪类选择器
• 组合
• 选择器的优先级
• vertical-align
• visibility
• 盒子模型-mdn

作者：AlexZ33

原文地址：https://segmentfault.com/a/1190000021902094

喜欢 0