CSS SUMMARY | ぼくのBLOG

type

Post

status

Published

date

Aug 14, 2022

slug

CSS-NOTE

summary

CSS学习笔记

基本信息与介绍

全称：“Cascading Style Sheets”

中文：层叠样式表

定义：“CSS describes the visual stle and presentation of the content written in HTML

CSS consists of countless properties that developers use to format the content:properties about front,text,spacing,layout,etc.”

CSS 描述了用 HTML 编写的内容的视觉风格和呈现方式

CSS 由开发人员用来格式化内容的无数属性组成：关于前面、文本、间距、布局等的属性。

最基础的示例


h1{
	 color:blue;
	 text-align:center;
	 font-size:20px;
}

最基础的示例の解析

h1称为选择器，CSS代码总是以选择器开头。如果我们想为页面上所有h1元素设置样式，我们需要在CSS上选择它，然后对其应用样式，称之为声明或样式(Declaration/Style)，格式为Property:Value。

所有声明或样式组成声明块（Declaration block）。

三种CSS位置分类

内联

写在HTML元素内部。

使用方法：在HTML标签内部通过style属性设置标签的CSS样式。

例：


<h1 style="color:blue">XXX</h1>

内部

写在HTML内，通过<style></style>标签设置CSS代码。

例子：


<head>
	...
	<stytle>
   	CSS代码
	</stytle>
<head>

外部

1.创建一个CSS文件

2.在对应HTML文件的<head>中加入


<link href="xxx.css" rel="stylesheet" />

href为CSS代码所在文件。

3.在xxx.css编写CSS代码

赋值和属性值

赋值方式

最基础的方式


选择器 { property:value; }

各种方式


/* 最常用的方式 */
property: value;
/* 用逗号分隔属性值 */
property: value, value, value;
/* 用空格分隔属性值 */
property: value value value;

/* 计算 px */
property: calc(value[px]);
/* 也可以进行百分比和 px 之间的计算 */
property: calc(value[%] - value[px]);
/* 同样可以进行百分比和百分比之间的计算 */
property: calc(value[%] - value[%]);
/* px 加 px */
property: calc(value[px] + value[px]);
/* px 减 px */
property: calc(value[px] - value[px]);
/* px 乘以 px */
property: calc(value[px] * value[px]);
/* px 除以 px */
property: calc(value[px] / value[px]);
/* px 乘以数值 */
property: calc(value[px] * number);
/* px 除以数值 */
property: calc(value[px] / number);
/* 数值除以 px 是错误的,在使用 calc 时，不能用数值除以指定的像素值。 */
property: calc(number / value[px]);

基本属性

font-size:字体大小

font-family:字体类型 sans-serif无衬线字体

text-fransform:转换文本 uppercase大写

font-style:字体样式 italic斜体

line-height:行高

text-align:对齐选项

list-style:列表样式 none删除黑点

backround-color:背景颜色

border:宽度样式颜色 …

注释


/* 注释内容 */

/*
注释内容
*/

按住ctr+‘/’ 可以快速框选注释或取消注释

选择器

合并选择器：


/*多个选择器同时选择*/
h1,h2,...
{
Property:Value;
...
}

后代选择器：


/* 选择父选择器下的子选择器，父选择器和子选择器通过空格相连 */
父选择器 子选择器
{
Property:Value;
...
}

ID(Hash)选择器：


<标签 id=“A” >xxx</标签>


/* 通过“#”+id 选择*/
#A {
 Property:Value;
}

注意：ID必须唯一

类(Class)选择器：


<标签 class=“A” >xxx</标签>
<标签 class=“A” >yyy</标签>


/* 通过“.”+类名选择 */
.A {
 Property:Value;
}

注意：类可重复使用

通用选择器：


*{
...
}

注意：该选择器会选择父元素中的所有子元素

相邻兄弟选择器：


/* 只有A之后的B选择 */
A+B   
{
Property:Value;
...
}

颜色

RGB（三原色）模型

解释：每种颜色都可以通过红绿蓝三原色组合而成，通过设置三原色的值，0-255，可以得出1680万种不同的颜色。

例如：

红色：Red255 G0 B0 绿色蓝色同理

白色：Red255 G255 B255

黑色：Red0 G0 B0

RGB表示法


rgb(0,255,255) red green blue
rgba(0,255,255,透明度)

十六进制表示法


#00ff11  00红色 ff绿色 11蓝色

伪类选择器

基本定义：带“：”的选择器

child

first-child和last-child可以分别从父元素中选择第一个和最后一个子元素。nth-child(数字)选择某一行或者某一列的元素。

:nth-child(数字)同样使用其他具有嵌套结构的元素组，如ul和ui，及其他父元素和子元素的组合。

超链接


a{
...
}

伪类

link伪类选择有href属性的a标签

visited伪类选择访问国的a标签

hover伪类选择鼠标悬停的a标签

active伪类选择鼠标点击期间的a标签

注意：上述四类的排列顺序为LVHA。

应用规则

冲突

例：


<p id="author-text" class="author">
  Posted by A
</p>


.author{
font-style:italic;
font-size:18px;
}
#author-text{
font-size:20px;
}
p,li{
font-family:san-serif;
color:#444444;
font-size:22px;
}

优先级：

关键字标记>内联样式>ID选择器>类/伪类选择器>元素选择器>通用选择器

注意：同优先级选择最后一个同优先级选择器。

继承

子类会继承父类的部分属性。

一旦子类重新设置了从父类继承下来的属性，则会覆盖所继承的属性。

盒模型

基本信息

每个 HTML 元素背后的基本结构都是盒模型。盒模型通常由内容区（content area）及其周围的内边距（padding）、边框（border）、外边距（margin）构成。

内容(content)：文本，图片等等

边界(border)：围绕在元素周围的线，技术上仍然在元素内。

填充(padding)：在内容周围的不可见空白，技术上仍然在元素内。

边距(margin)：在元素外的区域，在元素与元素之间。

填充区域(fill area)：填充背景颜色或者图片的区域。

默认情况下：

最终元素宽度=left border+letf padding+width+right padding+right border

最终元素宽度=top border+top padding+height+bottom padding+bottom border

注意：可以单独指定这些单独的尺寸。

盒子居中方法


{
width:A px;
margin-left:auto;
margin-right:auto;
}

不同类型的盒子模型

块级

元素基本被格式化为块

元素占据父元素宽度的100%

元素可以垂直堆叠，默认一个接着一个

常见的块级元素：body,main,header,footer,section,nav,aside,div,h1-h6,p,ul,ol,li,etc.

如果要强制转换，设置属性：display:inline;

内联

只占据内容所必须的空间

不会在结束后创建任何换行符

顶部和底部不会起作用，只会在左侧与右侧起作用

常见的内联元素：a,img,strong,em,button,etc.

如果要强制转换，设置属性：

display:block;

定位模式

正常流程：

默认定位或相对位置

元素中的布局是根据HTML代码

绝对定位：

绝对定位元素

通过设置元素的位置属性绝对定位元素的位置

从正常流程删除该元素

完全失去对周围元素的任何影响，他们可以重叠

使用顶部，底部，左侧或右侧属性定位元素

例：


<button>💕Like</button>
<-- win+";" 打开windows表情选择-->


body   /* button的父元素 */
{
positon:relative; /* 一定记住设置为relative */
}

button{
  font-size:22px;
  padding:20px;
  cursor:pointer;

	position:absolute;/*设置为绝对定位*/
  top: xx ;
	bottom: xx ;
  left: xx ;
	right: xx;
}

伪元素

定义：选择器：“: :”

常见属性：

first-letter 第一个字母

first-line 第一行

…

例：


h1::first-letter   /*设置第一个字母*/
{
 ....
}

before和after


A::before/after    /*before即A之前创建，after即A之后创建*/
{
content:""  //必须有，可以为空

}

布局

划分：

分类：页面布局和组件布局

技术：1.浮动布局 2.Flexbox 3.CSS网络

浮动布局：

使用float属性

使用后，就像一个绝对定位的元素，所有其他元素都会浮动在这个元素周围。