CSS基础入门笔记1 | 青训营笔记

丢丢277
166 阅读7分钟

1. css是什么

css全称Cascading Style Sheets 层叠样式表 用于定义页面元素的样式 例如:

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

基础语法

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


//语法
选择器 {
    属性: 属性值;
    属性: 属性值;
}

2.CSS的引入方法

三种引入方法

  • 外联
  • 内联
  • 行内
<!-- 外联 -->
<link rel="stylesheet" href="assets/style.css">

<!-- 内联 -->
<style> 
    li {
        marging: 0;
        list-style: none;
     }
     p {
         margin: 0;
     }
</style>

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

推荐外联

3.css是如何工作的

加载html-> 解析html -> 加载css -> 解析css-> 创建dom树 -> 展示页面

4.语法

选择器

找出页面中的元素 给他们设置样式 使用多种方式选择元素

  • 按标签名 类名 或者 id名
  • 按照属性
  • 按照DOM树中的位置
  • 通配选择器 *

MDN文档 选择器详细

伪类

  • 不基于标签和属性定位元素
  • 几种伪类
    • 状态伪类
    • 结构性伪类

状态伪类: 一个元素处于某种状态时被选中

<style>
//默认
a:link {
    color: black;
}
//点击过
a: visited {
    color: gray;
}
//鼠标悬浮
a: hover {
    color: orange;
}
//鼠标点击
a:active {
    color: red;
}

input:focus {
    border: 1px solid #ccc;
}

</style>

结构伪类:

<h2>世界电影票房排行榜</h2>
<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>复仇者联盟</li>
</ol>

<style> 
li:first-child {
    color: red;
}


</style>

常见的结构伪类有

  • :first-child 父元素第一个子元素

  • :last-child 父元素最后一个子元素

  • :nth-child(n) 父元素的第n个元素可以是数字

    • n 的值还可以：

    • odd：选择奇数序号的子元素。

    • even：选择偶数序号的子元素。

    • an+b：线性公式选择。例如 2n+1 表示奇数。

  • :nth-last-child(n) 选择属于其父元素的倒数第 n 个子元素。

  • :only-child 选择仅有一个子元素的父元素中的子元素。 (独生子女


type系列和child相比的区别是被伪类前的选择器约束 只有该选择器类型是可见的 例如

  • p:first-of-type 选择父元素中第一个p设置样式 如果必须是第一个p元素 别的元素视而不见

  • :last-of-type

  • :nth-of-type(n)

  • :nth-last-of-type(n)

  • :only-of-type

  • :empty

组合

image.png

选择器组 给多个选择器同时设置样式

body,h1,h2 h3 {
    margin: 0;
    padding: 0;
}

5.文本渲染

颜色

颜色表示方法 三原色 红绿蓝 范围是0-255

  1. rgb(143,172,135)
  2. #8fac87 (16进制表示
  3. hsl(0-360,0-100%,0-100) 色相 饱和度 亮度

直接写颜色名:black white ligntpink

透明度 取值0-1
0 -> 透明 1 -> 不透明

  • rgba(143,172,135,0.8)
  • #8fac87ff

字体

<style>
h1 {
    font-family: Optima,Georgia, serif;
}

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

</style>

使用web-font字体

@font-face {
    font-family: my-font;
    src: ...
}

webfont字体对性能有影响

字体大小font-size

  • 20px
  • 2em
  • 80%

字体形式 font-style

  • normal
  • italic

字体粗细 font-weight

  • 100-900
  • 400 = normal
  • 700 = bold

行高 line-height 如下图

image.png

white-space控制空白符 MDN white-space文档😘

6.css选择器的特异性(优先级


<article>
    <h1 class="title">我嘞个豆呀</h1>
</article>

<style>
   .title {
        color: red;
    }
    article h1 {
        color: blue;
    }

</style>

比如上述代码 两个选择器都设置了相同的样式 哪一个生效呢

类选择器的red生效

这与选择器的优先级有关

image.png

通过优先级 实现按钮样式复用

<button class="btn">普通按钮</button>
<button class="btn btn-primary">主要按钮</button>

<style>
    .btn {
        display: inline;
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 5px;
        border: none;
        cursor: pointer;
        background-color: #4e4f51;
        color: #2a8c95;
    }

   .btn.btn-primary {
        background-color: #007bff;
        color: #fff;
    }
</style>

7.继承

某些属性会自动继承其父元素的计算值,除非显式的指定一个值

 <p>
    This is a <em>test</em>
    of <strong>CSS inheritance</strong>
 </p>

 <style>
    body {
        font-size: 20px;
    }
    p {
        color: red;
    }  
    em {
        color: blue;
    }
 </style>

css中和文本相关的属性一般可以继承 而盒模型的属性一般不可以继承

对于不能自动继承的元素 我们可以使用显示继承

显示继承 让属性和父元素一样

* {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
}

.some-widget {
    box-sizing: content-box;
}

布局

确定内容的大小和位置

布局相关技术

  • 常规流
    • 行级
    • 块级
    • 表格
    • flex布局
    • grid布局
  • 浮动
  • 定位

盒模型

image.png

通常指定宽高指定的是内容comtent的宽高

width

  • 指定 content box 宽度
  • 取值为 长度 百分数 auto
  • auto 由浏览器根据其它属性确定
  • 百分数相对于容器的 content box宽度

height

  • 指定 content box高度
  • 取值为 长度 百分数 auto
  • auto 取值由内容计算得来
  • 百分数相对于容器的 content box高度
  • 容器有指定的高度时,百分数才生效

padding 内边距

image.png

百分数是相对于容器宽度

  • padding: 10px 上下左右10px
  • padding: 10px 20px 上下10px 左右20px
  • padding: 10px 20px 10px 20px 上左下右

border

四种属性:

  • border-width
  • border-stule
  • border-color
  • border-radius

四个方向 *border-top right bottom left

border: 1px solid #ccc;

border-left: 1px solid #ccc;

border-width: 1px 2px 3px 4px;
border-style: solid;
border-color: green blue;

border-left-width: 3px;
border-top-color: #f00;

border-radius: 50%;

margin

  • 指定四个方向的外边距
  • 取值可以是长度 百分数 auto
  • 百分数相对于容器宽度

使用margin:auto可以水平居中 前提是容器的宽度是确定值

外边距合并

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

<!--margin collapse案例-->

<style>
 .a {
    width: 100px;
    height: 100px;
    background-color: #f00;
    margin-bottom: 100px;
  }

 .b {
    width: 100px;
    height: 100px;
    background-color: #0f0;
    margin-top: 120px;
  } 
</style>     


<!-- a和b的外边距是120px 当外边距重合时取较大的那个值 而不是进行相加合并-->

box-sizing

border-box

内容包括 content padding border

好处是 提供padding不会撑大盒子

image.png

overflow

  • visible
  • hidden
  • scroll

行级和块级

指盒子的摆放方式

  • 块级盒子

不和其它盒子并列摆放 适用于所有的盒模型属性

  • 行级盒子

和其它行级盒子一起放在一行或者拆开成多行

盒模型中的width,height不可用 大小由内容决定

块级元素

生成块级盒子

body article div main section h1-6 p ul li

display: block

行级元素

生成行级盒子

span em strong cite code

display: inline


display属性

block块级盒子
inline行级盒子
inline-box本身是行级,可以设置宽高
none排版时完全被忽略

文档流的规则

  • 根元素浮动和绝对定位会脱离文档流
  • 其它元素都在文档流之内
  • 常规流中的盒子,在某种排版上下文中参与布局

行级排版上下文

只包含行级的盒子会创建一个IFC

排版规则

  • 盒子在一行内水平摆放
  • 一行放不下时,换行显示
  • text-align 决定一行内盒子的水平对齐
  • vertical-align决定一个盒子在行内的垂直对齐
  • 避开浮动的元素

块级排版上下文 BFC 哪些方式会按照块级方式排版

  • 根元素
  • 浮动 绝对定位 inline-block
  • flex子项和grid子项
  • overflow不是visible的块盒
  • display: flow-root

排版规则

  • 盒子从上到下摆放
  • 垂直 margin合并
  • 盒子内的margin不与外面的合并
  • 盒子不和浮动元素重叠

一般情况下一个盒子里要么都是块级元素 元素从上到下排列 要么都是行级元素 从左向右排列 如果出现了既有行级又有块级元素的情况 浏览器会自动添加块级盒子包裹行级盒子

avatar
文章
阅读
粉丝