CSS深入理解|青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第2天。 学习了今天的课程,对CSS3的理解更加深入了,先总结完向大家分享。
一、本节课重点内容:
本节课针对CSS3的运用,定位是熟练地理解CSS样式在前端开发中的作用。今天的课程分为两部分:上半部分讲授重点有:选择器、样式分类、伪类、组合样式及选择等基础CSS知识;下半场是对CSS的深入，重点包括:特异度、继承、初始化、CSS求值、基础布局与常规流、以及排版原则等。
二、课堂知识点纪要:
CSS用于修改HTML标签显示的形态、大小、排布等可视属性值，是前端中设计页面时必用的技术。
-
选择器
选择器分为:
1.标签选择器 `h1{height:100px; width:100px}` 2.id选择器 `#title{height:100px; width:100px}` 3.类选择器 `.title{height:100px; width:100px}` 4.属性选择器 `input[type="text"][disabled]{height:100px; width:100px}` -
样式分类
基础样式分为外链式，嵌入式和内联式,常用的为前两种:
<!--外链样式-—>
import "./css/style.less" as styles
import {Maincontain} from "./css/style.js"
<link rel="stylesheet" href="./css/style.css"></link>
<!--嵌入样式-—>
<style>
.mainContain{
margin:10px;
}
</style>
<!--内联样式-—>
<li style={“font-size:10px”}></li>
- 伪类、
伪类分为：
1.状态伪类
input:hover{
color:red; //input按下
}
input:focus{
color:blue; //input输入状态
}
2.结构伪类
.list > li:first{
color:red; //表单第一条
}
.list > li:nth-of-type(5){
color:blue; //表单第五条
}
-
组合样式
-
组合选择器
body,h1,p,span{ margin:10px; } [type="text"] { border:#000; padding:20px; } -
特异度
特异度是当同一个元素绑定多个样式属性时，区分哪个样式生效的优先级。 在CSS中，越特殊的样式优先生效。
在CSS选择器中有着特异性权重之分:
| 特异性权重 | 选择器类型 | 例子 |
|---|---|---|
| 0 | 通用选择器 | *{height:10px} |
| 1 | 行内样式 | （！important） |
| 2 | id选择器 | #main{height:10px} |
| 3 | 类选择器 | .main{height:10px} |
| 3 | 属性选择器 | input[type=“text”]{height:10px} |
| 3 | 伪类 | p:hover{height:10px} |
| 4 | 标签选择器 | span |
| 4 | 伪元素 | ::after |
-
继承
当CSS子元素没有出现属性在父级元素中出现时,子元素会遗传父元素的属性，比如：
.father{ color:blue; .child{ font-size:100px } } //显示 100px大的蓝色字 <div style=“font-size:100px”> <span style=“color:blue;”> Hello World！ </span> </div> //显示 100px大的蓝色字 -
初始值与初始化
CSS中元素没有设置的有些属性默认值，比如:
margin，padding默认为0; background默认为transparent（透明）; -
CSS计算求值
CSS的尺寸计算方法包括绝对算法与相对算法:
绝对长度单位: pc:1pc=16px pt:1pc=12pt px:像素 cm:厘米 相对长度单位 em:与当前行中一个字体的大小相等 rem:(rootem)相对于html根元素字体的大小 %:占父元素对应属性大小的百分比 视窗大小（可视区域） vw:视窗宽度百分比 vh:视窗高度百分比 vmax: vw、vh的上限 vmin：vw、vh的下限 -
基础布局
基础布局常用到: 常规流、浮动与绝对定位,其中常规流是最常用的布局流派。
-
常规流
常规流需要了解:
行级元素 如<input> </input> 作用域只在本行 块级元素 如<textarea> </textarea> 作用域包括包含内的多行 还有<div> <form> <table> 常用： 表格布局 <div class=“main”> <div class=“firstrow”> </div> <div class=“secondrow”> </div> <div class=“thirdrow”> </div> </div> 弹性布局 <div id="sp"> <span>1.AA</span> <span>2.BB</span> <span>3.CC</span> </div> #id{ width:200px; height:200px; display:flex; justify-content: space-between; } 网格布局 .mainGrid{ background:#1a1a1a; border: 1px solid #1b1b1b; border-radius :18px ; width:1150px; height:1150px; .item{ text-align: center; font-size: 200%; color: #fff; } .ContentA{ margin:2% 0 0 0; width:100%; height:49%; } .ContentB{ margin: 0 0 2% 0; width:100%; height:49%;} .ContentC{ margin: 2 0 2% 0; width:100%; height:49%;} } <div class=“mainGrid”> <div class=“ContentA item”> </div> <div class=“ContentB item”> </div> <div class=“ContentC item”> </div> </div> -
排版
排版需要通过大量观察UI图提升审美和创意;常见排版有三段式;侧边栏式等。
三、实践练习案例:
经过今天对CSS3的深入学习,我对层叠样式有了新的认识，这里写一个对图片的网格布局来巩固今天的学习，代码基于React和Style-Componet,仅供学习。
//问就是手动化战士
//Authorized by iiru
import styled from "styled-components";
export const MainContain =styled.div`
background:#1a1a1a;
border: 1px solid #1b1b1b;
border-radius :18px ;
width:1150px;
height:1150px;
.ContentA{
margin:2% 0 0 0;
width:100%;
height:49%;
}
.ContentB{
margin: 0 0 2% 0;
width:100%;
height:49%;
}
.SubContentB{
margin:0 1% 1% 1%;
float:left;
width:23%;
height:46%;
}
.SubContentA{
margin:0 1% 1% 1%;
float:left;
width:46%;
height:94%;
}
`
//大方块
export const SubMainContain =styled.div`
background:#2a2a2a;
border: 1px solid #252525;
width:100%;
height:100%;
margin:0 0 0 1%;
.pixTxt{
border:30% 30% 30% 30%;
color:#FEFEFE;
font-size:48px;
}
.mainTxt{
padding:5% 10% 5% 10%;
.slogan{
color:#838383;
font-size:48px;
font-weight:344;
}
.slogan-strong{
color:#d95d5d;
font-size:48px;
font-weight:344;
}
}
`
//橘色小方块
export const SubContainOrg =styled.div`
background:#ff6666;
border: 1px solid #d95d5d;
width:100%;
height:100%;
margin:0 2% 4% 2%;
.pixTxt{
padding:25% 25% 25% 25%;
color:#FEFEFE;
font-size:48px;
}
.iconStyle{
margin:10%
}
`
// 灰色小方块
export const SubContainCommon =styled.div`
background:#2a2a2a;
border: 1px solid #252525;
width:100%;
height:100%;
margin:0 2% 4% 2%;
.imgStyle{
width:100%;
height:100%;
}
.titleTxt{
padding:8% 10% 0% 10%;
color:#FEFEFE;
font-size:20px;
font-weight:512;
}
.mainText{
padding:2% 10% 0% 10%;
.mainTxt{
color:#838383;
font-size:20px;
font-weight:364;
}
.mainTxt-strong{
color:#d95d5d;
font-size:20px;
font-weight:364;
}
}
`
//Authored by iiru
//powerby styled.js
import React from "react";
import { Link} from "react-router-dom";
import { MainContain,Tarbar,Container} from "./component/img";
import { SearchOutlined,KeyOutlined,SyncOutlined,EditOutlined } from "@ant-design/icons";
export function ImgLayout(){
let routerkey = 1;
return (
<>
<MainContain>
<div className={"Margin"}>
<Tarbar className={"Tarbar"}>
<div className={"logoContainer"}>
<img src={require("../../assets/img/logo2.png")} className={"logo"} alt={""}></img>
{/*<img src={require("../../assets/img/diker.jpg")} className={"logo"} alt={""}></img>*/}
</div>
<div className={"Navigate"}>
<div className={"Navi"}>
<Link style={{color:(routerkey == 1) ? '#c1e5e5' : '#b5b7b8'}} to='/home'>HOME</Link>
</div>
<div className={"Navi"}>
<Link style={{color:(routerkey == 2) ? '#c1e5e5' : '#b5b7b8'}} to='/about' >ABOUT US</Link>
</div>
<div className={"Navi"}>
<Link style={{color:(routerkey == 3) ? '#c1e5e5' : '#b5b7b8'}} to='/servies'>SERVICES</Link>
</div>
<div className={"Navi"}>
<Link style={{color:(routerkey == 4) ?'#c1e5e5' : '#b5b7b8'}} to='/references' >REFERENCES</Link>
</div>
<div className={"Navi"}>
<Link style={{color:(routerkey == 5) ? '#c1e5e5' : '#b5b7b8'}} to='/contacts' >CONTACTS</Link>
</div>
</div>
<div className={"search"}>
<SearchOutlined className={"search-icon"}/>
</div>
</Tarbar>
<div className={"Banner"}>
<img className={"Banner"} src={require("../../assets/img/banner.png")}></img>
</div>
<div className={"Content"}>
<div className={"ContentA"}>
<Container>
<div className={"ContentIcon"}>
<KeyOutlined style={{color:"#c1e5e5",fontSize:"128px"}}/>
</div>
<div className={"ContentTitle"}>
ALL-IN-ONE NEW CONSTRUCTION
</div>
<div className={"ContentMain"}>
In business as in combat, trust is the great enabler in making the most of scarce resources. Many companies, for instance, have succeeded in increasing or speeding production while going from Just-in-Case to Just-in-Time levels of inventory. Just-in-Case is a function of a lack of trust; Just-in-Time is a function of trust. Just-in-Case says "I don't trust my guys to do what they say they are going to do"; Just-in-Time says, "I know I can count on my suppliers."
</div>
</Container>
</div>
<div className={"ContentB"}>
<Container>
<div className={"ContentIcon"}>
<SyncOutlined style={{color:"#c1e5e5",fontSize:"128px"}}/>
</div>
<div className={"ContentTitle"}>
RENOVATION + MODERNIZATION
</div>
<div className={"ContentMain"}>
As it happens, the number of men and women who work for Boeing, either directly as employees or indirectly as part of supplier companies engaged in carrying out work for Boeing, is considerably larger than the force under General Franks' command. All told, we are probably about 500,000-strong - a Desert Storm-sized force. As big as we are, to move fast and to execute with a high degree of precision, we, too, must have total confidence in the promises that we make to each other. That's the first prerequisite.
</div>
</Container>
</div>
<div className={"ContentC"}>
<Container>
<div className={"ContentIcon"}>
<EditOutlined style={{color:"#c1e5e5",fontSize:"128px"}}/>
</div>
<div className={"ContentTitle"}>
ARCHITECTURAL SERVICES
</div>
<div className={"ContentMain"}>
I also believe it is both possible and necessary - in the competitive arena that we occupy - to combine a hard-nosed sense of attending to the practicalities of survival . . . with a genuine concern for the health and well-being of partners and co-workers. In an increasingly interdependent world, selfishness is not a viable option; to be too selfish is, ironically, to dig your own grave.
</div>
</Container>
</div>
</div>
</div>
</MainContain>
</>
);
};
-
实现效果:
四、参考文献:
- 特异性计算 CSS选择器优先级（特异性）_彭世瑜
- 网格布局 Grid布局介绍_芋圆不想
五、心得体会:
今天是在青训营的第二天,深入学习了CSS3的高阶知识,算是对CSS基础的查缺补漏,尤其使伪类和特异度那块知识,实则非常实用。可以在后续的实战中加以运用。还是那句话,前端学习依赖日积月累,切不可心浮气躁。
