深入CSS | 青训营笔记

冰糕
145 阅读13分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第2天

CSS是用来定义页面元素的样式

组成：选择器、声明 (属性、属性值)

在页面使用CSS的方法

  1. 外链
 <link rel="stylesheet" href="/assets/style.css">
  1. 嵌入
 <style>
     li{margin:0;list-style:none;}
 </style>
  1. 内联
 <p style="margin:1em 0">
     Example Content
 </p>

选择器Selector

  • 按照标签名、类名、id
  • 按照属性
  • 按照DOM树中的位置

通配选择器

*{}

标签选择器

h1{}

id选择器

唯一的id值

 <h1 id="logo">
     
 </h1>
 ​
 <style>
     #logo{}
 </style>

类选择器

给多个标签设置同一类型样式

 <ul>
     <li class="done"></li>
     <li class="done"></li>
 </ul>
 ​
 <style>
     .done{
         color:gray;
     }
 </style>

属性选择器

选择标签内的属性给该标签设置样式

 <label>用户名：</label>
 <input value="zhao" disabled />
 ​
 <style>
     [disabled] {
         background:#eee;
     }
 </style>
 <!-- 表示属性有disabled就会改变样式 -->
 ​
 ​
 <label>密码：</label>
 <input type="password" value="123456">
 ​
 <style>
     input[type="password"] {
         border-color:red;
     }
 </style>
 <!-- 表示Input标签有type="password"属性和属性值就会改变样式 -->

规则

选择器说明
M[attr]M元素选择指定为attr属性的集合
M[attr=value]M元素选择指定为attr属性和value值的集合(完全匹配)
M[attr*=value]M元素选择指定为attr属性并且包含值为value的集合(部分匹配)
M[attr^=value]M元素选择指定为attr属性并且起始值为value的集合(起始匹配)
M[attr$=value]M元素选择指定为attr属性并且结束值为value的集合(结束匹配)
M[attr1][attr]M元素选择满足多个属性的集合(组合匹配)
[attr~=value]匹配带有一个名为 attr 的属性的元素 ，其值正为 value，或者匹配带有一个 attr 属性的元素，其值有一个或者更多，至少有一个和 value 匹配。
[attr=value]匹配带有一个名为 attr 的属性的元素，其值可正为 value，或者开始为 value，后面紧随着一个连字符。

伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。

M:伪类{}

:link、:visited、:hover、:active

注：

  1. link visited 只能给a标签加，hover和active可以给所有的标签加

  2. 如果四个伪类都生效，一定要注意顺序:L V H A.

  3. 一般网站只这样去设置:a{} a:hover{}。

    :link 访问前的样式(只能添加给a标签)

    :visited 访问后的样式(只能添加给a标签)

    :hover 鼠标移入时的样式(可以添加给所有的标签)

    :active 鼠标按下的样式(可以添加给所有的标签)

    一般网站都只设置a{}(link visited active) a:hover{}

:after、:before 通过伪类的方式给元素添加一段文本内容，使用content属性

:checked、:disabled、:focus针对的是表单的元素

 div:after{content:'world';color:red}
 div:before{content:'world'}
 ​
 :checked{background:red}针对的是有checked属性的表单
 ​
 :focus:{}针对的是有光标显示的时候

组合

1.后代:M N{} 包括子的子

2.父子:M>N{} 只包括N不包括N的子

3.兄弟:M~N{} 当前M下面的所有兄弟N标签(不包括M)

4.相邻:M+N{} 当前M下面相邻的N标签(不包括M)

CSS文字样式

font-family：字体类型

多个字体类型的设置目的(多个字体用,隔开):备用字体

字体名称中有空格的话，需要加''使用

英文字体：Arial,'Times New Roman'

中文字体：微软雅黑，宋体

中文字体的英文名称

微软雅黑：'Microsoft YaHei'

宋体：SimSun

注：1.设置多字体的方式2.引号的问题

通用字体：

Serif衬线体 -> Georgia、宋体

Sans-Serif无衬线体 -> Arial、Helvetica、黑体、微软雅黑

Cursive手写体 -> Caflisch Script、楷体

Fantasy夸张体

Monospace等宽字体 -> Consolas、Courief、中文字体

注：1.通用字体设置在最后2.英文字体放在中文字体前

使用Web Fonts

 <h1>
     Web fonts are awesome!
 </h1>
 ​
 <style>
     @font-face{
         font-family:"Megrim";
         src:
             url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2)
  format('woff2');
     }
     
     h1{
         font-family:Megrim,Cursive;
     }
 </style>

会消耗资源，自动下载字体

font-size：字体大小(默认16px)

写法:number(px)

注：字体大小一般为偶数

font-weight：字体粗细

写法:单词(normal、bold) | number(100、200、...900，100到 500都是正常的，600到900都是加粗的)

font-style：字体样式

italic斜体 / normal正常

注:oblique也是表示斜体，用的比较少，一般了解即可

区别:1.italic 带有属性倾斜的字体的才可以设置倾斜 2.oblique 没有倾斜属性的字体也可以设置倾斜操作

CSS优先级

  1. 相同样式优先级

    当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况

  2. 内部样式与外部样式

    内部样式与外部样式优先级相同，如果都设置了相同的样式，那么后写的引入方式优先级高

  3. 单一样式的优先级

    style行间>id>class>标签>*>继承

    注：style行间 权重 1000

    id 权重 100

    class 权重 10

    tag 权重 1

  4. !important(写在{}里面 是个值)

    提升样式优先级，非规范方式，不建议使用(不能针对继承的属性进行优先级的提升)

     #elem{color:red !important;}

  5. 标签+类与单类

    标签+类>单类

     div.box{}
 .box{}

  6. 群组优先级

    群组选择器与单一选择器的优先级相同，靠后写的优先级高

  7. 层次优先级

    权重比较

     ul li .box p input{}    1+1+10+1+1
 .hello span #elem{}     10+1+100

    约分比较

     ul li .box p input{}    li p input{}
 .hello span #elem{}     #elem{}

CSS样式继承

文字相关的样式可以被继承

布局相关的样式不能被继承(默认是不能继承的，但是可以设置继承属性 inherit值 )

 <div>
     <p></p>
 </div>
 ​
 p{border="inherit"}     继承div的border属性

CSS盒子模型

组成:content->padding->border->margin

物品 填充物 包装盒 盒子与盒子之间的间距

content:内容区域 width和height组成

padding:内边距(内填充)

只写一个值:30px(上下左右)

写两个值:30px 40px(上下、左右)

写四个值:30px 40px 50px 60px(上、右、下、左)

单一样式只能对应一个值:

padding-left

padding-right

padding-top

padding-bottom

margin:外边距(外填充 )

注：

  1. 背景色填充到margin以内(不包括margin区域)
  2. 文字在content区域添加
  3. padding不能为负数，而margin可以为负数

border:边框

border-style：边框样式

solid：实线

dashed：虚线

dotted：点线

border-width：边框大小

border-color：边框颜色

边框也可以针对某一边进行单独设置:border-right-style:中间是方向

案例：利用边框实现三角形

 div{width:0px;height:0px;border-left:30px solid red}

颜色：透明颜色transparent

box-sizing

box-sizing属性允许你以特定的方式定义匹配某个区域的特定元素。取值为content-box(默认值) | border-box

盒尺寸，可以改变盒子模型的展示形态。

默认值:content-box: width、height-->content

border-box：width、height-->content padding border

使用场景：

  1. 不用再去计算一些值
  2. 解决一些100%的问题

标签分类

block(块)：div、p、ul、li、h1...

1.独占一行

2.支持所有样式

3.不写宽的时候，跟父元素的宽相同

4.所占区域是一个矩形

inline(内联)：span、a、em、strong、img(特殊)...

1.挨在一起的

2.有些样式不支持，例如:width、height、margin(不支持上下)

3.所占的区域不一定是矩形

4.不写宽的时候，宽度由内容决定

5.内联标签之间会有空隙，原因:代码换行产生的（body(元素父容器)设置样式font-size:0，子容器重新设置font-size）

inline-block(内联块)：input、select...

1.挨在一起，支持宽高

2.所占区域是一个矩形

3.之间有空隙

注:布局一般用块标签，修饰文本一般用内联标签

Flex布局

作用在flex容器上作用在flex子项上
flex-directionorder
flex-wrapflex-grow
flex-flowflex-shrink
justify-contentflex-basis
align-itemsflex
align-contentalign-self

flex-direction

flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从上往下

取值含义
row默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右
row-reverse显示为行。当方向和row属性值是反的
column显示为列
column-reverse显示为列。当方向和column属性值是反的

flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示

取值含义
nowrap默认值，表示单行显示，不换行
wrap宽度不足换行显示
wrap-reverse宽度不足换行显示，但是是从下往上开始，也就是原本换行在下面的子项现在跑到上面

注：当子元素的整体宽度大于父容器的宽度时，会自行调节

宽度会改变，不会溢出，当宽度达到最小值之后才会移除

flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开

flex-flow:column wrap;

justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式

取值含义
flex-start默认值，表现为起始位置对齐
flex-end表现为结束位置对齐
center表现为居中对齐
space-between表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分分配
space-aroundaround是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半
space-evenlyevenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等

align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式

取值含义
stretch默认值，flex子项拉伸
flex-start表现为容器顶部对齐
flex-end表现为容器底部对齐
center表现为垂直居中对齐

align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的

取值含义
stretch默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%
flex-start表现为起始位置对齐
flex-end表现为结束位置对齐
center表现为居中对齐
space-between表现为两端对齐
space-around每一行元素上下都享有独立不重叠的空白空间
space-evenly每一行元素都完全上下等分

作用在flex子项上的css属性

取值含义
order可以通过设置order改变某一个flex子项的排序位置。所有flex子项的默认order属性值为0，值大往后
flex-grow属性中的grow是扩展的意思，扩展的就是fle子项所占据的宽度，扩展所侵占的空间就是除去元素外的剩余的空间间隙。默认值为0，为1的话是剩余的空间全部沾满
flex-shrink属性中的shrink是“收缩的意思”，flex-shrink主要处理当flex容器空间不足的时候，某个元素的收缩比例。默认值是1，0表示不收缩
flex-basisflex-basis定义了在分配剩余空间之前元素的默认大小
flexflex属性是flex-grow，flex-shrink和flex-basis的缩写
align-selfalign-self指控制单独某一个flex子项的垂直对齐方式

Grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在

作用在grid容器上作用在grid子项上
grid-template-columnsgrid-column-start
grid-template-rowsgrid-column-end
grid-template-areasgrid-row-start
grid-templategrid-row-end
grid-row-gapgrid-row
grid-gapgrid-area
justify-itemsjustify-self
align-itemsalign-self
place-itemsplace-self
justify-content
align-content
place-content

grid-template-columns和grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位(网格剩余空间比例单位)

有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作

 .box{width:300px;height:300px;border:1px gray dotted;display:grid;
 grid-template-rows:1fr 1fr 1fr;
 grid-template-columns:1fr 1fr 1fr;
 }
 或者
 grid-template-rows:repeat(3,1fr);
 grid-template-columns:repeat(3,1fr);

grid-template-areas和grid-template

area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区

grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写

grid-column-gap和grid-row-gap

grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸

CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写

justify-items和align-items

justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。

place-items可以让align-items和justify-items属性写在单个声明中。

取值含义
stretch默认值，拉伸。表现为水平或垂直填充
Start表现为容器左侧或顶部对齐
end表现为容器右侧或底部对齐
center表现为水平或垂直居中对齐

justify-content和align-content

justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。

取值含义
stretch默认值，拉伸。表现为水平或垂直填充
start表现为容器左侧或顶部对齐
end表现为容器右侧或底部对齐
center表现为水平或垂直居中对齐
space-between表现为两端对齐
space-around享有独立不重叠的空白空间
space-evenly平均分配空白空间

作用在grid子项上的css属性

取值含义
grid-column-start水平方向上占据的起始位置
grid-column-end水平方向上占据的结束位置。(span属性)
grid-row-start垂直方向上占据的起始位置
grid-row-end垂直方向上占据的结束位置。(span属性)
grid-columngrid-column-start+grid-column-end的缩写
grid-rowgrid-row-start+grid-row-end的缩写
grid-area表示当前网格所占用的区域，名字和位置两种表示方法
justify-self单个网格元素的水平对齐方式
align-self单个网格元素的垂直对齐方式
place-selfalign-self和justify-self的缩写

总结

CSS样式比较多，学习的地方还需更多时间查找MDN和WC CSS规范学习

avatar
文章
阅读
粉丝