CSS | 青训营笔记

今天一定不拖延
103 阅读6分钟

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

CSS是什么

image.png

CSS 是如何工作的

image.png

使用css的方法

内联

image.png

外链

<link rel=s"tylesheet" href="地址" >

rel="stylesheet"——关系：样式表，herf：找文件位置

嵌入

在标签当中写 style=属性

选择器

通配选择器

*{}

id选择器

结构: #id属性值{css属性名: 属性值; }

作用: 通过id属性值，找到页面中带有这个id属性值的标签，设置样式

    注意点:
  1. 所有标签上都有id属性
  2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的!
  3. 一个标签上只能有一个id属性值
  4. 一个id选择器只能选中一个标签
### 类选择器

image.png

属性选择器

有这个属性的就会被选中,写法： [属性]{}

//例如
[disabled]{}
input[type='password']{}

伪类

什么是伪类？

伪类对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容；原则上特征是不可以从文档树上推断得到的。

伪类有： :first-child ，:link:，:vistited，:hover:，:active，:focus，:lang，:right，:left，:first

就是css内植类css内部本身赋予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿来使用，当然你也可以改变它的部分属性比如：a:link{color:#FF0000;}CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类。

伪类有什么作用？

CSS很多的建议并没有得到浏览器的支持，但有四个可以安全使用的用在连接上的CSS伪类。

◆link用在为访问的连接上。

◆visited用在已经访问过的连接上。

◆hover用于鼠标光标置于其上的连接。

◆active用于获得焦点(比如，被点击)的连接上。 image.png

状态伪类

例如：

a:link{}

结构伪类

image.png

一些组合方式

亲子组合必须是直接子元素 image.png

颜色——RGB

image.png

两种写法：#000000————每两位代表一个颜色的权重
         rgb(0,0,0)————每个位置代表每个颜色权重

颜色——HSL

hsl(0,0%,0%) image.png

alpha 透明度

使用：rgba，hsla，#00000078 （也就是在后面增加一位来表示透明度）

字体 font

相关属性

  • font-family————定义字体：微软雅黑还是啥

    常见字体：无衬线字体（粗细均匀，首位无装饰）、衬线字体（粗细不均匀，首位有笔锋装饰）、等宽字体（字母或文字宽度相等）

    • image.png

  • font-size————大小注意一定要写单位，不写单位不生效 
    em也是相对于父级，比如父级是40px，我设置为2em，那么我这个字体大小就是2*em

    image.png

  • font-weight————粗细（100（normal）-900（bold）），注意！并不是所有的字体都有100-900，这跟字体有关，可能有的就只有100-200
  • font-style————字体样式

    a、正常（默认）：normal
b、倾斜：italic
（ `<em></em>`也会变倾斜，但是利用选择器也可以变正常）
  • font-variant————输入字母不受大小限制

属性连写

image.png

布局

image.png

盒子模型

css中规定，每个盒子由：内容区域content、内边距区域padding、外边距区域margin、边框区域border

image.png

width

默认设置的是content区域大小 image.png

height

image.png

padding

注意也会撑大盒子

padding后面值的顺序，是从上开始，顺时针给各方向内边距赋值 若只有三值：上、左右、下

若只有两值：上下，左右 image.png

想要盒子随着内容自动变化

就不要限制盒子大小。比如，想要文字都是相同的格式展示，不换行，那就不设置盒子的宽，这样就可以随着内容变化。

想要盒子就是规定的大小，不被padding影响大小

image.png

border

注意会撑大盒子 image.png

image.png

（这里solid是线条的种类）

solid：实线；dashed：虚线；dotted：点线
image.png

margin

image.png

各性质与方法，同内边距

外边距折叠现象
   a、合并现象：垂直布局的块级元素，上下margin会合并。两者距离为margin最大值   

   b、塌陷现象：互相嵌套的块级元素，子元素的margin-top会作用在父元素上。

       解决：（推荐使用第二种方法）
image.png
行内元素的垂直外边距

注意：如果想要通过margin或者padding改变行内标签的垂直位置（margin/padding-top/bottom），无法生效。

解决方法：用行高-light-height

flex 布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 image.png

使用：
.box{
  display: flex;
}

.box{
  display: inline-flex;
}

里面的子元素成为容器成员（flex-item） image.png

容器属性
flex-direation属性
flex-direction:row(从左到右,默认值)| row-reveser（从右到左） | column(从上到下) | column-reverse(从下到上)
flex-wrap属性
flex-wrap: nowrap（不换行，默认）| wrap（换行，第一行在上面） | wrap-reverse（换行，倒着，后面增加的在上面）;
flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow: <flex-direction> <flex-wrap>;
 justify-content属性
justify-content: flex-start（起点对齐） | flex-end（终点对齐） | center（居中） | space-between（两端对齐） | space-around（每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。）;
align-items属性

align-items属性定义项目在交叉轴上如何对齐。

align-items: flex-start（交叉轴的起点对齐） | flex-end（交叉轴的终点对齐） | center（交叉轴的中点对齐） | baseline（项目的第一行文字的基线对齐，就是第一行文字的下划线的位置） | stretch（如果项目未设置高度或设为auto，将占满整个容器的高度，默认值）;
align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

Grid布局

这是一个二维布局系统，最大优点就是可以同时处理列和行，每一个元素为grid-item，不像其他布局那样，主要是一维布局系统。 image.png

属性

详细属性介绍

总结

就算再复习一遍，内容还是很多的，css不常写所以忘了好多，最新的一部分知识是flex和grid布局，这两个布局属性很多，个人觉得没有必要全部背下来，记住几个常用的，然后用的时候再查。总的来说还是需要大量的练习来巩固知识，不然忘得真的很快（是谁忘了我不说）

个人觉得样式不是难点，主要的问题可能还是在布局上面

avatar
文章
阅读
粉丝