[青训营]-CSS基础

用户7353605197616
139 阅读10分钟
这是我参加「第四届青训营 」笔记创作活动的的第2天

1、什么是CSS

· 层叠样式表
· 用来定义页面元素的样式

2、选择器

2.1 标签选择器

· 标签选择器的作用是为页面中某一类标签指定统一的CSS样式
· 优点是能快速为页面中同类型的标签统一设置样式
· 缺点是不能设计差异化样式，只能选择全部的当前标签

标签名 {
    属性1: 属性值1;
}

ul {
    
}

  • 规范：

    • 属性值前面，冒号后面，保留一个空格
    • 标签名和大括号中间保留空格

2.2 类选择器

如果想要差异化选择不同的标签，单独选一个或者几个标签，可以使用类选择器

.类名 {
    属性1: 属性值1;
    .....
}

.red {
    color: red;
}

2.3 类选择器

  • id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式
  • HTML 元素以 id属性 来设置 id 选择器，CSS中 id 选择器 以 “#” 来定义
  <style>
        #byte {
            color:pink;
        }
    </style>

<body>
    <div id="byte">字节青训营</div>
</body>

2.4 属性选择器

属性选择器可以根据元素特定的属性来选择元素，这样就可以不用借助于类或者id选择器。

选择符含义
E[att]选择具有att属性的E元素
E[att=“val”]选择具有att属性且属性值等于val的E元素
E[att^=“val”]匹配具有att属性且值以val开头的E元素
E[att$=“val”]匹配具有att属性且值以val结尾的E元素
E[att*=“val”]匹配具有att属性且值中含有val的E元素

2.5 结构伪类选择器

  • 结构伪类选择器主要根据文档结构来选择元素
  • 常用于根据父级选择器选择里面的子元素
选择符含义
E:first-child匹配父元素中的第一个子元素E
E:last-child匹配父元素中最后一个E元素
E:nth-child(n)匹配父元素中的第n个子元素E
E:first-of-type指定类型E的第一个
E:last-of-type指定类型E的最后一个
E:nth-of-type（n）指定类型E的第n个

其中n可以是数字，也可以是表达式。如：2n表示偶数，n+5是从第五个开始，-n+5表示前五个。 同时nth-child和nth-of-type也是有区别的：nth-child对父元素里面所有孩子排序选择（序号是固定的），先找到第n个孩子，然后看看是否和E匹配；nth-of-type对父元素里面指定子元素进行排序选择，先去匹配E，然后再根据E找第n个孩子。

2.6 选择器的权重

这是css的三大特性之一的优先级：当同一个元素指定多个选择器，就会有优先级的产生。

  • 选择器相同，则执行层叠性
  • 选择器不同，则按权重
选择器权重
继承或者 *0，0，0，0
元素选择器（标签选择器）0，0，0，1
类选择器，伪类选择器0，0，1，0
ID选择器0，1，0，0
行内样式style=""1，0，0，0
！important无穷大

需要注意的是权重可以叠加，但是永远不会有进位。

这里再介绍下CSS其他两大特性.

层叠性：

  • 相同选择器设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。

  • 层叠性主要解决样式冲突的问题

  • 层叠性原则：

    • 样式冲突，遵循的原则是就近原则

继承性：

标签会继承父标签里面的某些样式。例如文字系列：font-size、color、line-height、text-align等 ，而border、padding、margin等不能继承。

2.7 复合选择器

  • 后代选择器

可以选择父元素里面的子元素

元素1 元素2 {
    样式声明
}

  • 子选择器

子元素选择器只能选择作为某元素的最近一级子元素。

元素1 > 元素2{
    样式声明
}

  • 并集选择器

并集选择器可以选择多组标签，同时为它们定义相同的样式

元素1,元素2 {
    样式声明
}

  • 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果,最大的特点是用冒号表示。

/* a是标签选择器 */
a {
    color:gray;
}

/* :hover 是链接伪类选择器，鼠标经过 */
a :hover {
    /*鼠标经过的时候，由原来的灰色  变成了红色*/
   color:red; 
}

3、CSS基本属性

3.1 文字属性

  • font-family

    • 各种字体之间必须使用英文状态下的逗号隔开
    • 一般情况下，如果有空格隔开的多个单词组成的字体，加引号
    • 最常见的几个字体：
div {
   font-family: "Microsoft Yahe",tahoma,arial,"Hiragino Sans GB";
}

  • font-size

用于设置字体大小

p{
    font-size: 20px;
}

这里需要注意的是谷歌浏览器默认字体为16px，中文版最小字体为12px，若要让Chrome支持小于12px 的文字需要用到缩放。

  • font-weight

用于设置字体的粗细

font-weight:  normal | bold |  bolder  | lighter |number

  • font-style

p {
  font-style: normal | italic;
}

平时我们很少给文字加斜体，反而要给斜体标签( em , i )改为不倾斜字体

3.2 文本属性

  • color

div {
    color: red;
}

除了预定义的颜色还可以用16进制表示如：#FF0000, #FF6600，#29D794，这也是最常见的。
还有rgb（255，0，0） 或rgb(100%，0%，0%) R表示红色，G表示绿色，B表示蓝色，取值可以在正整数或者百分数。A表示透明度取值0到1之间。
这里再扩展一下另一种透明度的表示，opacity：取值范围0到1之间，0表示完全透明，1表示不透明， 两者的不同在于opacity会继承父元素的opacity属性，而RGBA设置的元素的后代元素不会继承不透明属性。

  • text-align

用于设置文本内容的水平对齐方式

div {
    text-align:left | center | right;
}

  • text-decoration

用于装饰文本，可以给文本添加下划线，删除线，上划线等

div {
    text-decoration: underline;
}

  • text-indent

用于指定文本的第一行缩进，通常是将段落的首行缩进

div {
    text-indent: 10px;
}

p{
   text-indent: 2em;
}

em是一个相对单位，就是当前元素(font-size)1个文字的大小,如果当前元素没有设置大小则会按照父元素的文字大小。

  • line-height

p {
   line-height: 26px;
}

一般用于文本垂直居中，设置大小为元素高度。

4、 布局

4.1 盒子模型

  • 边框border

允许你指定一个元素边框的样式和颜色

border : borde-width || border-style || border-color

因为边框实际并不是一条直线，如果我们将四条边设置不同的颜色，将边框逐渐放大，可以得到每条边框都是一个梯形，所以可以利用这一点绘制三角形。

.border {
    width: 0;
    height: 0;
    border-style:solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
}

  • 内边距padding

用于设置内边距,即盒子边框与内容之间的距离

  • 外边距margin

用于设置外边距，即控制盒子和盒子之间的距离

4.2 CSS3盒子模型

  • content-box

box-sizing: content-box;

盒子大小为 width + padding + border,此种情况盒子大小为 宽度 + 内边距 + 边框，这也是我们之前写盒子所默认的。

  • border-box

box-sizing: border-box;

此种情况盒子大小为 宽度，不包括内边距和边框，这样 padding 和 border 就不会撑大盒子了(前提是 padding 和 border 不会超过 width 宽度,若超过则为padding 和 border 两者之和。)

4.3 标准流

所谓的标准流，就是标签按照规定好默认方式排列

  • 块级元素会独占一行，从上向下顺序排列。

    常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

  • 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
    常用元素：span、a、i、em 等

4.4 浮动

  • 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局, 因为浮动可以改变元素标签默认的排列方式。
选择器 {
    float: left || right || none;
}

  • 浮动的特性

  1. 脱标：浮动元素会脱离标准流。
  2. 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
  3. 浮动元素会具有行内块元素特性

4.4 定位

将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子

  • 静态定位static

静态定位是元素的默认定位方式，无定位的意思,按照标准流特性摆放位置，它没有边偏移。

选择器 {
	position: static;
}

  • 相对定位relative

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的。在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待，因此，相对定位并没有脱标，它最典型的应用是给绝对定位当爹的。

  • 绝对定位absolute

绝对定位是元素在移动位置的时候，是相对于它的祖先元素来说的，绝对定位不再占用原先的位置。

  • 固定定位fixed

固定定位是元素固定于浏览器的可视区的位置，不再占有原先的位置。主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变。

  • 粘性定位sticky

粘性定位可以被认为是相对定位和固定定位的混合，以浏览器的可视窗口为参照点移动元素，粘性定位占有原先的位置，必须添加top，left，right，bottom其中一个才有效。

4.5 流式布局(百分比布局)

流式布局，就是百分比布局，也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

  • flex-direction：设置主轴的方向
  • justify-content：设置主轴上的子元素排列方式
  • flex-wrap：设置子元素是否换行
  • align-content：设置侧轴上的子元素的排列方式（多行）
  • align-items：设置侧轴上的子元素排列方式（单行）
  • flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
  • align-self：控制子项自己在侧轴上的排列方式
  • order：属性定义项目的排列顺序，数值越小，排列越靠前。

4.6 布局排版

  • IFC image.png
  • BFC

BFC的原则：如果一个元素具有BFC，那么内部元素再怎么弄，都不会影响到外面的元素。

如何触发BFC：
float的值非none
overflow的值非visible
display的值为：inline-block、table-cell...
position的值为:absoute、fixed

5、元素的隐藏与显示

5.1 display显示隐藏

display属性用于设置一个元素应如何显示

display: none;  /*隐藏对象*/

display: block; /*除了转换为块级元素之外，同时还有显示元素的意思*/
  • display隐藏元素后，不再占有原来的位置

5.2 visibility显示隐藏

visibility属性用于指定一个元素应可见还是隐藏

visibility: visible; /*元素可视*/

visibility: hidden;  /*元素隐藏*/

  • visibility 隐藏元素后，继续占有原来的位置。

avatar
文章
阅读
粉丝