CSS教程： CSS（上）

时间 2020-03-04

标签 css 教程栏目 CSS 繁體版

原文原文链接

CSS（上）css

什么是CSS

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

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

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

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

例：chrome

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

基础

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

一、HTML的局限性

若是直接利用html页面书写页面，页面的美观达不到要求，若是要添加一些简单样式利用html属性添加会是代码复杂臃肿，因此咱们要使用css进行页面的美化；
编程

二、CSS做用以及初识

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

使用css的原理：
可以将结构html和样式css分离书写，简化代码，提升可阅读性；
浏览器

三、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文件，而后分别链接过来便可；

四、CSS 书写格式

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

五、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.

六、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

相似示例：

没法改变颜色的标签

七、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

八、数值与单位

九、背景和边框

背景知识

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-

一、半透明边框

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

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

二、多重边框

目前为止，咱们大多数人可能用过（或滥用过）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

三、border实现三角形

用css画三角形很简单，就是将一个块元素宽高设置为0，而后给某一边设一个比较厚的宽度
利用盒子的均分原理，盒子都是矩形或者正方形，从形状的中心，向4个上下左右划分4个部分。

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

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

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

四、圆角/阴影/过渡

九、文字文本样式

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

用于样式文本的 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

十二、格式化列表

<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: 容许您为项目符号使用自定义图片，而不是简单的方形或圆形。

1三、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

1四、文本自动换行

word-break

1五、文本自动换行2

若是你碰到一个比自身容器长的文本，这个技巧对你颇有用。在这个示例中，默认时，无论容器的宽度，文本都将水平填充。

1六、长单词与URL自动换行

1七、使用服务端字体

Web Font
@font-face

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

font-size-adjust

1九、文字效果

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

十二、盒子模型

全部的元素都被一个个的“盒子（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类型：

常见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 相关属性设置

1三、做业: 用css写一个网页

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

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

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

1四、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代码

参考阅读

而后能够暂时跳过伪类选择器，开始从新仔细看文本相关的样式

MDN-基本文本和字体样式

固然，你也能够选择阅读其它网站，好比W3School等上面相应的内容。

1. CSS教程： CSS（高级）
2. CSS教程
3. css教程
4. Bootstrap CSS教程
5. CSS变量教程
6. 【CSS 基础教程】
7. css切图教程
8. CSS 变量教程
9. CSS基础教程
10. Css初步教程
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• Java 8 Stream 教程
• Github 简明教程

CSS教程： CSS（上）

什么是CSS

基础

一、HTML的局限性

二、CSS做用以及初识

三、css引入方式

01 行内样式：

02 内部样式：

03 css外部连接：

四、CSS 书写格式

五、CSS选择器

基础选择器

a. 标签选择器

b. 类选择器

c. id 选择器

d. 通配符选择器 *

e. 属性选择器

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

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

g. 伪类选择器

H. 伪元素选择器

使用before伪元素实现面包屑

i. 子元素伪类选择器

j.

六、CSS选择器权重

七、CSS优先级

八、数值与单位

九、背景和边框

背景知识

一、半透明边框

解决方案

二、多重边框

三、border实现三角形

四、圆角/阴影/过渡

九、文字文本样式

01 文字大小font-size

02 文字字体设置font-family

unicode字体

03 文字的粗细设置font-weight

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

05 字体的颜色控制 color

06 文字居中设置text-align

07 文本的行高设置line-height

08 文本的首行缩进 text-indent

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

10 字体综合写法

11 自定义字体@font-face

十二、格式化列表

a、处理列表间距

a、 列表特色样式

1三、CSS样式化连接

a. 默认样式

b 将样式应用到一些连接

1四、文本自动换行

1五、文本自动换行2

1六、 长单词与URL自动换行

1七、使用服务端字体

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

1九、文字效果

text-shadow

word-wrap

属性

源码

十二、盒子模型

盒子类型

块级盒子（Block box） 和 内联盒子（Inline box）

display

block vs inline

inline-block

inline-block类型执行并列显示

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

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

使用inline-block显示水平菜单

使用float属性显示水平菜单

使用inline-block显示水平菜单

怎么解决li之间的间隙

缘由分析：

解决方案：

inline-table

list-item类型

a、列表特色样式

1六、长单词与URL自动换行

块级盒子（Block box）和内联盒子（Inline box）