- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

第二章：CSS基础

吴梦青发表于 2021/11/27 13:05:22 2021/11/27

【摘要】第二章：CSS 基础 2.1 CSS简介Cascading Style Sheets用来定义页面元素的样式设置字体和颜色设置位置和大小添加动画效果h1{color:white;font-size:14px;}选择器（Selector）：选中要给那些元素定义样式eg：选择器是h1，说明要给h1标签定义样式属性（Value）声明（Declaration）在页面中使用CSS<!-- 外联 -...

第二章：CSS 基础

2.1 CSS简介

Cascading Style Sheets
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

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

选择器（Selector）
{
	属性（Property）：属性值（Value）
}

选择器：选中要给那些元素定义样式
- eg：选择器是h1，说明要给h1标签定义样式
属性：给元素设置某个属性
- eg：color是颜色属性
属性值
- eg：while：白色
声明（Declaration）

声明=属性+属性值
声明块=花括号+多条声明
规则=选择器+声明块

在页面中使用CSS

外链：把CSS写在一个单独的文件里边，然后使用link标签把它引入页面中
- 推荐使用第一种方法，更利于代码的维护
嵌入：直接把样式写在一个style标签里
内联：直接把一个元素的样式写在这个元素的style属性里

<!--  外联  -->
<link rel="stylesheet" href="/assets/style.css">
<!--  推荐使用第一种方法，更利于代码的维护  -->

<!--  嵌入  -->
<style>
    li { margin: 0; list-style: none; }
    p { margin: lem 0; }
</style>

<!--  内联  -->
<p style="margin:lem 0">Example Content</p>

一个完整的页面
这个代码包含一个h1标签和一个p标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Blog</title>
    <style>
        h1 {
         color:orange;
         foot-size:24px;
       }
       p {
         color:gray;
         foot-size:14px;
         line-height:1.8;
       }
     </style>
<body>
    <h1>Web框架的架构模式探讨</h1>
    <p>在写干货之前，我想先探讨两个问题，模式的局限性？模式有什么用？</p>
</head>
</html>

代码风格：编程风格

每条声明写一行
两条规则之间空一行

调试CSS：开发者工具

2.2基础选择器

CSS：Cascading Style Sheets
用来定义页面元素的样式

选择器Selector

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置

通配选择器“ * ”（是一个星号）：可以匹配页面中所有元素

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
* {
  color:red;
  font-size:20px;
}
</style>

标签选择器：通过标签名选中一个元素。

h1：一级标题；
p：段落

<h1>This is heading</h1>
<p>this is some paragraph.</p>

<style>
h1 {
  color:orange;
 }
 p {
  color:gray;
  font-size:20px;
}
</style>

id选择器：通过id属性选择元素
！注意：id的值在整个页面中必须是唯一的

<header>
    <h1 id="logo">
        <img src="/h5.png" width="64"
            alt="HTML5 logo">
         HTML5 文档
    <h1>
</header>

<style>
    #logo {
        foot-size:60px;
        foot-size:200;
    }
</style>

类选择器：通过Class属性来选择元素
eg：li的class=done，所以可以通过.done选中这个元素
id不同，class的值在页面中可以出现多次，把有相同样式的标签起相同class值，然后通过类选择器定义样式

<h2>Todo List</h2>
<ul>
    <li class="done">Learn HTML</li>
    <li class="done">Learn CSS</li>
    <li>Learn JavaScript</li>
</ul>

<style>
.done {
    color:gray;
    text-decoration:line-through;
}
</style>

属性选择器：选择元素
eg：input的一个属性是disabled，可以通过input[disabled]拥有disabled这个属性的input。

<p>
    <label>用户名：</label>
    <input value="test" disabled>
</p>

<style>
    input[disabled] {
        background:#eee;
        color:#999;
    }
</style>

根据属性值选中元素
input[type=“password”]：type的值是password的input元素

<p>
    <label>密码：</label>
    <input type="password" required>
</p>

<style>
    input[type="password"] {
        border-color:red;
        color:red;
    }
</stype>

属性选择器可以限定选择元素的属性值是以某一个字符开头或结尾
href^="#"：以#号开头
href$=".jpg"：以jpg结尾

<p><a href="#top">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>

<style>
    a[href^="#"] {
        color:#f5467;
        background:0 center/1em
            url(top.svg) no-repeat;
        padding-left:1.1em;
     }
     a[href$=".jpg"] {
         color:deepskyblue;
         background:0 center/1em
             url(image.svg) no-repeat;
         padding-left:1.1em;
     }
</style>

伪类（pseudo-classes）
不基于标签和属性定位元素，通过状态或所属的DOM结构来选择元素
几种伪类
动态伪类：根据元素所处的状态来选择元素的。eg：链接；
a: link:正常链接
a: visited: 访问过的链接；
a: hover :鼠标放上去之后的链接；
a: active: 鼠标按下这个链接之后的状态；
点击文本输入框，变成focus状态。通过 : focus 设置这种样式下的状态。

<p>
    <a href="http://example.com" target="_blank">
    example.com
    </a>
</p>

<label>

用户名：

    <input type="text">
</label>

<style>
    a:link {
        color:black;
    }
    
    a:visited {
        color:gray;
    }
    a:hover {
        color:orange;
    }
    a:active {
        color:red;
    }
    :focus {
        outline:2px solid orange;
    }
 </style>

结构性伪类：通过在DOM树中所处位置来选择元素
"li:first-child"选中第一个元素
"li:last-child"选中最后一个元素

<h2>电影票房排行</h2>
<ol>
    <li>阿凡达</li>
    <li>泰坦尼克号</li>
    <li>星球大战：原力觉醒</li>
    <li>复仇者联盟3</li>
</ol>
<style>
    li {
        list-style-position:inside;
        border-bottom:1px solid;
        padding:0.5em
    }
    
    li:first-child {
        color:coral
    }
    
    li:last-child {
        border-bottom:none;
     }
</style>

组合器(Combinators)
第一种：选择器相加

<label>
    用户名：
    <input class="error" value="aa">
</label>
<span class="error">最少3个字符</span>

<style>
    .error {
        color:red;
    }
    input.error {
        border-color:red;
    }
</style>

其他种类：

<article>
    <h1>拉森火山国家公园</h1>
    <p>拉森火山国家公园是位于。。。</p>
    <section>
        <h2>气候</h2>
        <p>因为拉森火山国家公园。。。</p>
    </section>
</article>

<style>
    article p {
        color:coral;
    }
    
    article > p {
        color:limegreen;
    }
    
    article section h2 {
    border-bottom:1px dashed #999;
    }
</style>

选择器组：多个相同规则的选择器，可合为一组
用逗号分隔开，就可以形成一个选择器组

body, h1, h2, h3, h4, h5, h6, ul, ol, li {
    margin: 0;
    padding: 0;
}

[type="checkbox"],[type="radio"] {
    box-sizing:border-box;
    padding: 0;
}

2.3设置字体

字体font-family：通过font-family属性可以设置字体，这个属性值是一个字体列表。用逗号隔开。
!注意：用户的设备上可能没有那么多字体，所以可以多设置几种字体，浏览器会选择设备上有的字体展示
serif：字体族，某一类字体，浏览器可以从设备已有的字体中选择一个属于该类的字体进行展示。
CSS中用5种通用字体

衬线体：笔画末端有装饰
无衬线体：线条简单无装饰
手写体：线条模仿手写体
fantasy：设计感强，较夸张
等宽字体：每个字符的宽度都一样，所有的中文都是等宽字体

<h1>卡尔斯巴德洞窟</h1>
<p>卡尔斯巴德洞窟。。。</p>

<style>
    h1 {
        font-family:Optima, Georgia, serif;
    }
    body {
        font-family:Helvetica, sans-serif;
    }
</style>

font-family使用建议\

字体列表最后写上通用字体族，确保实际展示出来的风格是想要的
若需要显示中文和英文使用不同的字体，需要把英文字体放在中文字体前面。

中文字体一般包含英文字体字符;
中文字体放前面的话，所有字体都是以中文字体展示；
英文字体放前面，显示中文时，英文字体无这个中文字符，就会按照中文字体字符显示。

使用Web Fonts：使用一些特殊的字体，用户设备上没有，可以使用Web字体
用@font-face声明web字体

* 通过font-family指定字体名字
* src指定字体的url和格式

使用web字体时，只需要指定它的名字即可。浏览器会通过URL下载字体并展示。
！注意：中文的字体文件较大，需使用字体处理工具。把页面上使用到的字符提取成小的字体文件，再使用。

<h1>Web fonts are awesome!</h1>
<p>Web fonts are a CSS feature...</p>

<style>        
    @font-face {
        font-family: 'Megrim';
        src: url('/megrim.woff2') format('woff2'),
             url('/megrim.ttf') format('truetype')
    }
    
    @font-face {
        font-family: 'Buda';
        src: url('/buda.woff2') format('woff2')
             url('/buda.ttf') format('truetype');
    }
    
    h1 {
        font-family: Megrim, Cursive;
        font-size:40px;
    }
</style>

font-size：设置文字的字号

关键字
- small、medium、large
长度
- px、em
百分数
- 相对于父元素字体大小进行计算
  2em是父级字符大小的两倍
  .note，80%：20*80%=16px

<section>
    <h2>A web font example</h2>
    <p class="note">Notes:Web fonts ...</p>
    <p>With this in mind, let's build ...</p>
</section>

<style>
    section {
        font-size:20px;
    }
    
    section h1 {
        font-size:2em;
        <!--  像素是40px  -->
    }
    
    section .note {
        font-size:80%;
        <!--  像素是16px  -->
        color:orange;
    }
    </style>

font-style：设置文字是否为斜体
它的默认值是normal
斜体：将normal设置为italic即可

<p class="normal">Normal Text</p>
<p class="italic">Italic Text</p>

<style>
    p {
        font-size:36px;
        font-family:"Helvetica Neue", sans-serif;
    }
  .normal {
    font-style:normal;
  }
    .italic {
        font-style:italic;
    }
</style>

font-weight：文字粗细，支持100到900九种字重。

* 数字表示
* normal和bold表示

！注意：大部分字体可能只支持normal和bold两种字重
当字体不支持字重时，会以能支持的最接近的字重来显示。

<ul>
    <li class="w1">锦瑟无端五十弦（100）</li>
    <li class="w2">锦瑟无端五十弦（200）</li>
    <li class="w3">锦瑟无端五十弦（300）</li>
    <li class="w4">锦瑟无端五十弦（400-normal）</li>
    <li class="w5">锦瑟无端五十弦（500）</li>
    <li class="w6">锦瑟无端五十弦（600）</li>
    <li class="w7">锦瑟无端五十弦（700-bold）</li>
    <li class="w8">锦瑟无端五十弦（800）</li>
    <li class="w9">锦瑟无端五十弦（900）</li>
</ul>

<style>
    li { font-size:28px }
    .w1 {font-weight: 100}
    .w2 {font-weight: 200}
    .w3 {font-weight: 300}
    .w4 {font-weight: 400}
    .w5 {font-weight: 500}
    .w6 {font-weight: 600}
    .w7 {font-weight: 700}
    .w8 {font-weight: 800}
    .w9 {font-weight: 900}
</style>

line-height：可设置行间距，表示两行文字基准线之间的距离
当使用没有单位的数字来表示行高时，实际行高是这个数字*字体大小。

<section>
    <h1>Font families recap</h1>
    <p>As we looked at in ...</p>
</section>

<style>
    h1 {
        font-size:30px;
        line-height:45px;
    }
    
    p {
        font-size:20px;
        line-height:1.6;
        <!--  行高=20*1.6=32px  -->
      }
</style>

font：把字体的属性一起设置
font顺序：style weight size/height family
除了字号和字体，其他属性也可不指定

font：style weight size/height family
h1 {
    <!--斜体 粗细 大小/行高 字体族-->
    font: bold 14px/1.7 Helvetica, sans-serif;
}
p {
    font: 14px serif;
    <!--除了字号和字体，其他属性也可不指定-->
}

2.4设置文字样式

text-align

设置文字在文本里的对齐方式

left：左对齐
center：居中对齐
right：右对齐
justify：分散对齐：

分散对齐：两端文字完全对齐，分散对齐会调整两端的空格间距使文字两端对齐

！注意：下面这些的
spacing

letter-spacing：字母间距（默认是0）单位是px
word-spacing：单词间距（默认是0）单位是px

text-indent：设置首行文字的缩进（默认是0）单位是px
text-decoration：文字修饰（默认是none）
underline：下划线
line-through：删除线
overline：上划线

white-space：控制换行和空格的行为
normal：空格和换行会被合并
nowrap：这行文字永远不会换行
pre：保留文本中的空格和换行不做任何合并
pre-wrap：和pre类似，当一行内显示不下时会自动折行。
pre-line：合并空格，保留换行。

text-shadow：设置阴影
text-shadow：color offset-x offset-y blur-radius
颜色在x方向上的偏移在y方向上的偏移阴影的模糊程度

2.5盒模型基础:css布局

content：盒子里内容的大小
padding：内容和边框的间距
border：边框
margin：此盒和其他盒的距离

width
指定content box（内容区域）的宽度
取值为长度、百分数、auto
auto由浏览器根据内容和其它属性确定
百分数相对于容器的content box宽度

Height
指定content box高度
取值为长度、百分数、auto
auto由子元素的高度加起来得到的
百分数相对于容器的content box高度计算
！注意：当父容器也设置了明确的高度时，百分数才生效；
当父容器的高度是auto，子元素设置百分比的高度是无用的。

padding
指定元素四个方向的内边框
padding-top
padding-right
padding-left
padding-bottom
默认值都是0
可分别设置，也可通过padding一起设置四个方向上的内边距\

padding只有一个值时，四个方向都是这个值。
两个值：eg:10px 20px：上下是10px，左右是20px
四个值：上右下左
百分数的padding相对父容器宽度

<div class="box1">When one value is ...</div>
<div class="box2">When two value is ...</div>
<div class="box3">When three value is ...</div>
<div class="box4">When four value is ...</div>

<style>
    div {
        width:200px;
        text-align:justify;
        margin-bottom:1em;
    }
    .box1 {
        background:coral;
        padding:20px;
    }
    
    .box2 {
        background:lightskyblue;
        padding:20px 40px;
    }
    .box3 {
        background:lightpink;
        padding:20px 30px 40px;
        <!--  上：20px 下40px 左30px 右30px  -->
    }
    .box4 {
        background:coral;
        padding:20px 30px 40px 50px;
        <!--  上 20px 右 30px 下 40px 左 50px  -->
    }

border

指定容器边框样式、粗细和颜色

边框样式\

none：无边框
solid：实线
dashed：虚线
dotted：点状线

粗细：用长度表示
颜色：可切换
border

三种属性
- border-width:边框粗细
  - border-width：1px 2px 3px 4px
- border-style：边框样式
  - border-style : solid
- border-color：边框颜色
  - border-color : green blue
  三部分放在一起：border：1px solid #ccc
四个方向
- border-top
  - border-top-color : #f00;
- border-bottom
- border-right
  - border-right : 2px dotted red
- border-left
  - border-left：1px solid #ccc
  - border-left-width : 3px

当四条边的颜色都不相同时，四条边以斜角的方式交叉在一起。

把其他边框的设置成透明，则可以得到一个三角形
在实际项目中可以用border模拟三角形

margin

指定元素四个方向的外边框
取值可以是长度、百分数、auto
百分数相对于父容器宽度
margin的auto值是自动计算的
- margin:auto：水平居中

<div></div>

<style>
  div {
    width: 200px;
    height:200px;
    background:coral;
    margin-left:auto;
    margin-right:auto;  
  }
  </style>

margin collapse

只会垂直方向上发生

<div class="a"></div>
<div class="b"></div>

<style>
 .a{
  background:lightblue;
  height:100px;
  margin-bottom:100px;
}
 .b{
  background:coral;
  height:100px;
  margin-bottom:100px;
}
</style>

负margin

当margin是负值时，两个元素会重叠起来。

<div class="a"></div>
<div class="b"></div>

<style>
 .a{
  background:lightblue;
  width:200px;
  height:100px;
}
 .b{
  background:coral;
  height:100px;
  width:100px;
  margin-left:20px;
  margin-top:-20px;
}
</style>

box-sizing:border-box

宽度好高度是设置的内容区域的尺寸。

<p class="a">This is the ...</p>
<p class="b">Length and ...</p>

<style>
  .a {
    width:100%;
  }
 没写完，明天再写

2.6css中的盒子

DOM树与盒子

根据DOM树生成盒子
摆放盒子（Layout）
- 盒子尺寸和类型
- 定位模式（positioning scheme）
- 节点在DOM树中的位置
- 其它信息（窗口大小、图片大小等）
  不同的盒子

<p><span>Learn to Code HTML & CSS is a simple and ...</span></p>

<style>
    p {
        line-height:2;
        padding:1em;
        border:3px solid blue;
        background: #ccf;
    }
    span {
        background: #fcc;
        border:3px solid red;
     }
     </style>

p：块级
style：行级
块级
行级
Block Level Box
Inline Level Box
不和其他盒子并列摆放
和其他行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性
盒模型中的width、height不适用

块级元素
行级元素
生成块级盒子
生成行级盒子；内容分散在多个行盒（line box）中
body、article、div、main、section、h1- 6、p、ul、li等
span、em、strong、cite、code等
display：block
display：inline

display
block
块级盒子
inline
行级盒子
inline-block
本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none

排版时完全被忽略

inline—block

<p>An inline-block box is something...
    <em>it won't be broken</em>
    ... it won't break across two lines.
</p>

<style>
    em {
        color:red;
        background:coral;
        display:inline-block;
        width:10em;
    }
</style>

2.7盒子的效果
圆角 border-radius：圆角的半径

无法复制加载中的内容

20px：ABCD都是20px
20px 50px：A：20px B：50px C：50px D：20px
20px 30px 40px 50px：A：20px B：30px C：40px D：50px（顺时针转一圈）
20px / 50px：（x和y两个方向上的半径）
- 水平方向：20px
- 垂直方向：50px
30%（百分数）
- 水平方向：宽度的30%
- 垂直方向：高度的30%
给每个角的水平和垂直方向设置不同的值

background：设置盒子的背景
默认值
background-color：背景颜色
透明色
background-image：背景图片
url(/cat.png)
background-repeat：背景图是否重复
no-repeat；repeat（默认值）；repeat-x（水平方向重复）；repeat-y（垂直方向重复）；
background-position：背景图位置
默认值是0 0
background-size：背景图大小
可通过宽度和高度来制定

background-position

background-position：top 垂直方向是顶部；水平方向居中
background-position：left 垂直方向是居中；水平方向居左
background-position：center 垂直方向是居中；水平方向居中
background-position：bottom right 图片在右下角
background-position：20px 20px
Background-position：50% 50%
background-position：bottom 20px right 20px 图片距离右边缘和下边缘分别是20像素、20像素
CSS Sprites

<ul>
    <li class="cat">Cat</li>
    <li class="dog">Dog</li>
    <li class="lion">Lion</li>
    <li class="bird">Bird</li>
    <li class="fox">Fox</li>
    <li class="pig">Pig</li>
</ul>

<style>
ul {
    padding:0
    }
    
li {
    margin:1em;
    padding-left:70px;
    line-height:64px;
    background:url(/sprites.png) no-repeat 0 0;
    overflow:hidden;
 }
 
.dog {
     background-position-y:-64px;
     }

.lion {
     background-position-y:-128px;
     }
     
.dog {
     background-position-y:-192px;
     }
     
.fox {
     background-position-y:-256px;
     }

我要是会英语多好，这样我就不会切换输入法了，切换输入法太麻烦了。

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

第二章：CSS基础

第二章：CSS 基础

2.1 CSS简介

2.2基础选择器

2.3设置字体

2.4设置文字样式

2.5盒模型基础:css布局

margin

margin collapse

负margin

box-sizing:border-box

2.6css中的盒子

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

第二章：CSS基础

第二章：CSS 基础

2.1 CSS简介

2.2基础选择器

2.3设置字体

2.4设置文字样式

2.5盒模型基础:css布局

margin

margin collapse

负margin

box-sizing:border-box

2.6css中的盒子

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

推荐阅读

相关产品