CSS|青训营笔记

UR
206 阅读10分钟

这是我参与「第四届青训营 」笔记创作活动的的第二天

1.css是什么？

1.(层叠样式表）Cascading Styple Sheets

2.用来定义页面元素的样式

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

3.css最基础代码如下：

  • h1为选择器
  • color和font-size为选择器Property
  • white、14px表属性值
  • font-size:14; 和 color:white; 表示声明
h1{
color：white;
font-size:14px;
}

2.页面中使用CSS四种方式

1.外联

<link rel = "stylesheet" href="xx.css">  

2.嵌入

<style>
li { margin : 0; list-styple:none;}
p{ margin : 1em 0; }
</style>

3.内联（直接将样式写入标签的style中，无需选择器）

<p style = "margin :1em 0">The Content</p>

3.CSS是如何工作的？

首先，一打开一界面，先加载HTML,再解析HTML，创建出DOM树，在解析HTML时，会加载解析CSS，添加样式到DOM节点，计算出每个结点位置和属性样式得到渲染树，最后展示页面

750e5e2fd6c9580f69f03b11a7513e5.jpg

4.选择器

注：选择器使用标签名字，类、id、节点在dom树中的位置等来选择元素

  • 通配选择器（星号*，指代所有元素）

代码：

<h1>heading</h1>
<p>paragraph</p>
<style>
* {
  color: green;
  font-size: 28px;
}
</style>

代码效果：

1ade82a773c91c0baff4f9dbf1e6463.jpg

  • 标签选择器（通过标签设置样式）

    代码：

    <div>I do love eating!</div>
<style>
div{
color:aqua;
font-size:30px;
}
</style>

    代码效果：

d05f6f0420f142dd34fc12ef4a7ea73.jpg

  • id选择器

    通过给id起名，再通过“#id名”去设置样式（设置样式时，要求id值唯一）

    代码：

    <p id = "p1">奋</p>
<p id = "p2">发</p>
<p id = "p3">图</p>
<p id = "p4">强</p>
<style>
#p1{color : red}
#p2{color : green}
#p3{color : pink}
#p4{color : blue}
</style>

    代码效果：

976d05343fbdd0709ab1f78c9908a6e.jpg

  • 类选择器(同一类型标签设置样式时使用)

    <p class = "xswl">蒜香鸡翅</p>
<div class = "xswl">鸡蛋汉堡</div>
<p class="kswl">可乐鸡翅</p>
<div class = "kswl">牛肉汉堡</div>
<style>
.kswl{
     color : grey; 
     font-size : 30px;
     }
.xswl{
     color:green;
     font-size:25px;
}     
</style>

    代码效果：

02b6e49b840a15925ce0c565ef6d3a3.jpg

  • 属性选择器
  1. input[type ="password"] : 通过元素的属性值去选中元素后可进行修改
  2. [disabled]：通过属性去选中元素后设置样式
  3. a[href^="#"] ：若href的属性值以 # 开头就会被匹配上
  4. a[href$=".jpg"] : 匹配以 .jpg 结尾的超链接

代码：

<p><a href="#top">return top</a></p>
<p><a href="a.jpg">check photo</a></p>
<label>用户名</label>
<input value ="黄" disabled/>
<input type ="password"> 
<style>
a[href^="#"]{
color:#f54766;
background : 0 center/1em
url(https://xxx.png) no-repeat;
padding-left: 1.1em;
}
​
a[href$=".jpg"]{
color:deepskyblue;
background: 0 center/1em
url(https:xxx.png) no-repeat;
padding-left: 1.2em;
}
​
input[type ="password"]{
color : red;
}
​
[disabled]{
background-color:navajowhite;
}
</style>

代码效果：

7964b9fab70fc2ff0fd8b1ea18be73a.jpg

5、伪类

  • 分类：

    1.状态伪类：不是具体值或某一元素，而是该元素还有处于某种特定的状态下才会被选中 eg(链接访问状态选择器)： a : link(当前状态) a : visited(表示访问过的链接)

    a : hover(表示当鼠标移上链接后）

    a :active(表示鼠标按下去后)

    2.结构性伪类 : 根据dom节点在DOM树出现的位置来决定是否选中元素

    eg(伪码选择器):

    li:first-child

    li:last-child

  • 组合选择器修改样式

639dc4cf4f69fb2f7e2a84bb5591654.jpg

6、颜色

  • rgb（r，g ，b）rgb三者取值范围0~255（0为黑色，255为白色）eg:rgb(54,139,86)

  • #红红绿绿蓝蓝 （16进制表示,eg:#368b56）

  • 颜色-HSL

    hsl（数字,xx%,yy%）----颜色0-360，饱和度0-100%，亮度0-100%

  • alpha透明度

    1.rgba(r,g,b,alpha)—— alpha取值为0~1且alpha越小越透明

    2.hsla(数字,xx%,yy%,alpha)—— alpha取值为0~1且alpha越小越透明

  • 颜色名单

813372870380dc15044227af49ce9fc.jpg

7、字体

  • 通用字体组

2b6d6deae48d83737973dfa49d05f0c.jpg

  • font-family

    1 .指定多个字体用逗号隔开,字体从前到后检查存在后先调用

    2.末尾一定要加入通用字体组，主要用于区分中英文字体

  • font-size

    1.关键字：small、medium、large

    2.长度：px、em（em是相对单位，如2em是其父级的2倍）

    3.百分数：相对于父元素字体大小

  • font-style

    1.normal（正常及非斜）

    2.italic（斜体）

  • font-weight（字重/粗细）

    1.取值100到900，默认是400

    2.取值normal或者bold

  • line-height

    1.定义：两行文字的基准线之间的距离

    2.设置为数字：表示字体大小的多少倍

    代码：

    <h1>i ready to love u</h1>
<p>just a joke</p>
​
/*顺序： 斜体 粗细 大小/行高 字体族 */
h1{
font:bold 20px/1.7 Helvetica,sans-serif;
}
p{
font :italic 18px  serif;
}

    代码效果：

817ceeb07fefe2780730ace37e40dd6.jpg

8、文本内容

  • text-aligin 代码：

    <h1>左对齐，包括最后一行也左对齐</h1>
<h2>居中对齐，包括最后一行也居中对齐</h2>
<h3>右对齐，包括最后一行也右对齐</h3>
<h4>除最后一行外，两端对齐，没房紧贴行的边缘。The common starling is a medium-sized perching bird in the starling family, Sturnidae. It is about 20 cm (8 in) long and has glossy black plumage, which is speckled with white at some times of year. The legs are pink and the bill is black in winter and yellow in summer; young birds have browner plumage than the adults. It is a noisy bird, especially in communal roosts, with an unmusical but varied song.</h4>
<style>
h1{
text-align:left;
color :lightseagreen;
}
h2{
text-align:center;
color:lightcoral;
}
h3{
text-align:right;
color:navajowhite;
}
h4{
text-align:justify;
color:black;
}
</style>

    代码效果：

ccf5f3b7ce11c639d5e989f923f7aba.jpg

  • spacing:通过letter-spacing和word-spacing来控制 注：在字和字之间没有空格的时候word-spacing是没有作用的，它是作用与字和字之间的空格大小，用与调整字字之间空格的大小，他的截取是以字为单位，而letter-spacing 是以字符或字母。

  • text-indent:首行缩进（1em相对于一个汉字）

代码：

<div>准备好了吗？</div>
<style>
div{
text-indent:2em;
}

代码效果：

2d7b45d9cb327036746396f175cabff.jpg

  • text-decoration：文字修饰，如：underline、line-through、overline 代码：

    <p class ="p1">牧笛横吹，黄酒小菜有几碟</p>
<p class ="p2">牧笛横吹，黄酒小菜有几碟</p>
<p class ="p3">牧笛横吹，黄酒小菜有几碟</p>
​
<style>
.p1{
text-decoration:underline;
color:lightseagreen;
}
.p2{
text-decoration:line-through;
color:lightseagreen;
}
.p3{
text-decoration:overline;
color:lightseagreen;
}
</style>

代码效果：

11b291a7ebfecde5f21ff0bc7262495.jpg

  • white-space控制空白符+换行

    1.normal多个空格合并掉；

    2.nowrap：强制不换行

    3.pre：保持原来所有空格，与原来格式一模一样

    4.pre-wrap：一行显示不下时才换行

    5.pre-line：合并空格,保留换行

    代码：

    <style>
.p1{
white-space:normal;
}
.p2{
white-space:nowrap;
}
.p3{
white-space:pre;
}
.p4{
white-space:pre-wrap;
}
.p5{
white-space:pre-line;
​
}
</style>
​
<p class ="p1">兰亭临帖，行书如行云流水。月下门推，心细如你脚步碎。          忙不迭，千年碑易拓却难拓你的美。真迹绝，真心能给谁。</p>
<p class ="p2">兰亭临帖，行书如行云流水。月下门推，心细如你脚步碎。          忙不迭，千年碑易拓却难拓你的美。真迹绝，真心能给谁。</p>
<p class ="p3">兰亭临帖，行书如行云流水。月下门推，心细如你脚步碎。          忙不迭，千年碑易拓却难拓你的美。真迹绝，真心能给谁。</p>
<p class ="p4">兰亭临帖，行书如行云流水。月下门推，心细如你脚步碎。          忙不迭，千年碑易拓却难拓你的美。真迹绝，真心能给谁。</p>
<p class ="p5">兰亭临帖，行书如行云流水。月下门推，心细如你脚步碎。          忙不迭，千年碑易拓却难拓你的美。真迹绝，真心能给谁。</p>
​

    代码效果：

0a7dfa083eaa52cd24fe15e8c625e2c.jpg

9、调试CSS

  • 右键点击页面，选择“检查”
  • 使用快捷键： Ctrl+shift+I (Windows)、Cmd+Opt+I (Mac)

10、选择器的特异度

参考文档：深入理解CSS选择器优先级

  • 优先级：内联>ID选择器>类选择器>标签选择器

代码：

<div id="content" class="content">
我是什么颜色
</div>
#content {
    color: #f00;
}
.content {
     color: #0f0;
}

代码效果：

c41b08b2fc3fed04a64a05d756f7d41.jpg

  • 优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：
  1. 内联样式，那么 A = 1, 否则 A = 0;
  2. B 的值等于 ID选择器 出现的次数;
  3. C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
  4. D 的值等于 标签选择器 和 伪元素 出现的总次数 。
  5. 比较规则: 从左往右依次进行比较 ，较大者胜出，如果相等，则继续往右移动一位进行比较 如果4位全部相等，则后面的会覆盖前面的

11、继承

某些属性会自动继承父元素的计算值，除非显示指定一个值（inhreit将不可继承的属性变成可继承）

CSS中，每个属性有初始值（eg：background-color初始值为transparent，margin-left初始值为0）

12、CSS求值过程

注：（计算值和使用值的区别）

计算值：浏览器拿到css后，可以马上算出或转换出的一些相对值，可以通过resolving做一些处理。

指定值：拿到css文件和html无法分析出绝对值多少。例如：body设置为100%，需要实际布局才能 决定的值放在formatting去计算。

abee1efc4ab43c7498e43d762cb813c.jpg

13、布局

1、布局是什么：确定内容的大小和位置的算法（依据元素、容量、兄弟节点和内容等信息来 计算）

2、CSS布局相关技术分三种：文档流，浮动，绝对定位。

6577cae11913fdd3d9202a1457813d5.jpg

3、盒模型：分两种为content-box和border-box

①构成：都由content、padding、border、margin构成

②区别：

context-box的width和height只包含content、

855b4c3e0c1dac1bd3246db206ccaf3.png

border-box的width和height包含content、padding、border

8dd80cbf07f8a8d5481c4ebcd32c717.png

4、width、height 、padding、margin、overflow、border

  • width指定content box的宽度

  • width百分数相当于容器的content box的宽度

  • height指定content boxd的高度

  • 容器有指定高度时，height百分数才生效

  • padding指定四个方向的内边距，百分数相对容器的宽度

  • padding设置顺序：上右下左

  • margin指定元素四个方向外边框，百分数等于容器的宽度 （取值：长度，百分数，auto：水平居中）

  • margin collapse中margin-bottom/top上下两个间距，只会取最大间距，不会叠加起来

    代码：

    <div class="d"></div><br/>
<div class="a"></div>
<div class="b"></div>
​
<style>
.d{
    width: 200px;
    height: 200px;
    background: coral;
    margin-left: auto;
    margin-right: auto;
    }
     .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }
​
  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }
    </style>

    代码效果：

6dff2de55e0433768324099ea05be2f.jpg

  • overflow（溢出）： visible(默认)：内容溢出显示在方框外，不裁剪

    代码：

    <style>
  .a {
 border:2px solid red;
 height:200px;
 width:200px;
   overflow:visible;
  }
</style>
<p class="a">广东工业大学（Guangdong University of Technology），
 简称“广工”，主校区位于广东省 广州市 ，是广东省重点建设的 省属重点大学 、
 广东省“211工程” 重点建设高校，是首批 广东省高水平大学 、首批 广东省高水平理工科大学 
 、国家“ 111计划 ”、“ 2011计划 ”高校；入选教育部“ 卓越工程师教育培养计划 ”、
 首批 新工科研究与实践项目 、 国家大学生文化素质教育基地 、 国家知识产权示范高校 、
 教育部 深化创新创业教育改革示范高校 ，是 全国大学生创新创业实践联盟 、
  金砖国家智库合作中方理事会 、 粤港澳高校联盟 、 粤港澳院士专家创新创业联盟 、 
  大学通识教育联盟 、 国际设计艺术院校联盟 、国家 集成电路产教融合发展联盟 主要成员单位。
  </p>

    代码效果：

1986ba51ae6f2c1f13dc31d47c4920b.png

将overflow属性值改为hidden、则效果如下：

545cc8b5c56cf9adfc15112fe0eb2c1.jpg

将overflow属性值改为scroll，则效果如下：

7993f22c7422650b3d683dea40b8d54.jpg

  • border设置容器边框样式，粗细、颜色

    ① 三种属性：border-width，border-style,border-color

    ② 四个方向： border-top、border-right、border-bottom 、 border-left

    代码：

    <div class="d1">古娜拉黑暗之神</div><br/>
<div class="d2">come的喂~ABC</div><br/>
<div class="d3">帅过吴彦祖</div><br/>
<div class="d4">如来佛祖C</div><br/>
​
​
<style>
.d1{
border:1px dotted red;
}
.d2{
border-left:3px dashed  yellow;
}
.d3{
border-width:2px;
border-color:green;
border-style:solid;
}
.d4{
border-left-width: 3px;
border-top-color: yellow;
border-style:solid;
}
</style>

代码效果：

902441381d9ccf41c9d8ef9751bcf36.jpg

14、块级VS行级

a7849e74947ebd5db2b1a0f543eced6.jpg

af84d21549d4841c91ccf15f085805c.jpg

15、display属性

  • block ：块级盒子
  • inline ：行级盒子
  • inline-block ： 本身是行级，可以放在行盒中（设置宽高，一个整体不会被拆成多行）
  • none ：排版时被忽略

16、常规流

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

17、排版上下文

行级排版上下文：

  • inline Formatting Context（IFC）
  • 只包含行级盒子的容器会创建一个IFC
  • IFC内的排版规则：盒子在一行内水平摆放，一行放不下时，换行显示。
  • text-align决定一行内盒子的水平对齐
  • vertical-align决定一个盒子在行内的垂直对齐
  • 避开浮动(float)元素

块级排版上下文：

  • Block Formatting Context(BFC)

  • 某些容器会创建一个BFC

    ①根元素

    ②浮动，绝对定位，inline-block

    ③Flex子项和Gird子项

    ④overflow值不是visible的块盒

    ⑤display:flow-rdol;

  • BFC内的排版规则

    ①盒子从上到下摆放

    ②垂直margin合并

    ③BFC内盒子的margin不会与外面的合并

    ④BFC不会和浮动元素重叠

代码：

<span>
  This is a text and
  <div>block</div>
  and other text.
</span>
​
<style>
  span {
    line-height: 3;
    border: 2px solid red;
    background: coral;
  }
​
  div {
    line-height: 1.5;
    background: lime;
  }
</style>

代码效果：

35d1ca684e5ffa224e7ad4c1e39be5f.jpg

18、Flex Box是什么？

  • 新的排版上下文

  • 可以控制子级盒子的：摆放流向、排放顺序、盒子宽度和高度、水平和垂直方向的对齐，是否允许折行。

    <div class="container">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>
<style>
  .container {
    display: flex;
    border: 2px solid #966;
  }
​
  .a, .b, .c {
    text-align: center;
    padding: 1em;
  }
​
  .a {
    background: #fcc;
  }
​
  .b {
    background: #cfc;
  }
​
  .c {
    background: #ccf;
  }
</style>

    代码效果：

0592282c62e302db7a70ddd71d75c74.jpg

19、position

  • static:默认值，非定位元素

  • relative:在常规流中布局，相当自身原本位置偏移，使用top、left、button、right设置 偏移长度

  • absolute：脱离常规流，相对于最近的非static 祖先定位，绝对定位，不会对流内元素造成影响

  • fixed：相对于视口绝对定位

avatar
文章
阅读
粉丝