CSS basic part

时间：2021-05-23 23:41:01 收藏：0 阅读：0

CSS

简介

名字：cascading style sheet 层叠级联样式表
作用：是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言
特点：丰富的样式定义，易于使用和修改，多页面应用，层叠，页面压缩

入门

插入CSS

可以在HTML的中添加

<link rel = "stylesheet" href = "css的文件名.css">

也可以在添加

列如
4 @import URL("") 在style中用

选择器

基本选择器

标签选择器（例如 h1{})
类选择器 (.class{})
id选择器(#id{} 全局唯一，不能重复使用同一个id)
精确度越高优先级越高

层次选择器

后代选择器标签1 标签2{} 选择标签1元素内的所有标签2元素
子选择器标签1>标签2{} 选择所有父级是标签1元素的标签2元素
相邻选择器标签1 + 标签2{} 选择所有紧接着标签1元素之后的标签2元素
通用选择器标签 ~ 标签{} 当前选中元素的向下的所有兄弟元素

属性选择器

标签[属性名=属性值（属性）]{}

结构伪类选择器

:first-child{}

:last -child{}

:nth-child(){} 例如 p:nth-child(1) 是其父元素的第一个子元素。还要是p元素。

:nth-of-type(){} 例如 p:nth-of-type(2) 规定属于其父元素的第2个 p 元素的每个 p：

:hover

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="笔记3.css" rel="stylesheet">
</head>
<body>
<p>000</p>
<p class="omg">s1</p>
<p>s2</p>
<p>s3</p>
    <ul>
        <li class="game">
            <p>p1</p>
        </li>
        <li class="life">
            <p>p2</p>
        </li>
        <li class="game">
            <p>p3</p>
        </li>
        <li class="life">
            <p>p4</p>
        </li>
        <li id="fuck">
            <p>p5</p>
        </li>
    </ul>
</body>
</html>

body>p{
    color: blue;
}
.omg+p{
    color: blanchedalmond;
}
.omg~p{
    font-size: x-large;
}
ul{
    background: aqua;
}
ul li{
    color: gold;
}
ul [class="game"]{
    text-align: center;
}
.game{
    background: brown;
}
.life{
    background: cornflowerblue;
}
#fuck{
    background: forestgreen;
}
#fuck:hover{
    font-size: xx-large;
}

美化

(span起到重点强调作用)

字体

（CSS字体属性定义字体，加粗，大小，文字样式）

color 设置字体的颜色
font - style 风格（关键词： normal italic（斜体） oblique（斜体）
font - family 字体 (可以定义一系列的字体从前往后查看调用第一个能用的字体，中文字体靠后)
font - size 字体大小（关键词： small large ... 数值 px 数值%）
font - weight 字体粗细（关键词：normal bold bolder lighter 数字400相当与normal）

tips ：font ：字体大小行高字体风格

font-style
font-weight
font-size/line-height
font-family
可以不设置其中的某个值，也是允许的。未设置的属性会使用其默认值。

文本

text-align 文本对齐（关键词：center left right justify）
vertical-align 垂直对齐（关键词： top middle bottom）
text-transform 文本转换（关键词： uppercase lowercase capitalize）
text-indent 首行缩进（2em 缩进两字节）
line-height 行高间距
text-decoration 下划线设置（关键词：none overline line-through underline）
text-shadow 文本阴影（水平阴影垂直阴影模糊效果颜色）

超链接

:visited 选择所有已访问的链接
:link 选择所有未被访问的链接。
:hover选择鼠标悬停其上的链接。
:active 选择活动的链接

tips：:hover 必须被置于 :link 和 :visited 之后，才是有效的。

:active 必须被置于 :hover 之后，才是有效的

列表

list-style-type 列表（关键词：无序列表 circle square 有序列表 upper-roman lower-alpha 删除默认设置 none）
list-style-position 指定列表项标记（项目符号）的位置（ inside outside）
list-style-image 将图像设置为列表项标记

tips:list-style : type position image

背景

background-image : 一个元素添加多幅背景图像。不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者
background-size: 指定背景图像的大小(关键词：contain cover 数值px)
background-origin：指定背景图像的位置
- border-box - 背景图片从边框的左上角开始
- padding-box -背景图像从内边距边缘的左上角开始（默认）
- content-box - 背景图片从内容的左上角开始
background-clip 指定背景的绘制区域
- border-box - 背景绘制到边框的外部边缘（默认）
- padding-box - 背景绘制到内边距的外边缘
- content-box - 在内容框中绘制背景

tips：background: image position repeat

盒子模型

border

边框 (围绕在内边距和内容外的边框)

border-style 边框样式(关键词：none dotted dashed...)
border-width 边框宽度(关键词（没有具体值）：thick medium thin px em)
border-color 边框颜色

`name - 指定颜色的名称，如 "red"

RGB - 指定 RGB 值, 如 "rgb(255,0,0)"

Hex - 指定16进制值, 如 "#ff0000"

tips： border: width style color

margin

外边距 (清除边框外的区域，外边距是透明的)

margin-top
margin-bottom
margin-right
margin-left

tips: margin: top right bottom left/ top right&left bottom/top&bottom right&left

padding

内边距 (清除内容周围的区域，内边距是透明的)

基本和margin一致

边框up

border-radius 圆角
box-shadow 盒子阴影
border-image 边界图片

浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响

float 浮动
left right none inherit
display 显示
none inline block
clear 清理浮动
left right none inherit both
overflow 下拉框
visible hidden scroll auto inherit

定位

position

static 默认定位
relative 相对定位元素的定位是其的正常的位置
fixed 相对于浏览器窗口是固定位置
absolute 相对于已定位的父元素，若无则相对于
sticky 粘性定位例如一键返回顶部

重叠元素

z-index (number auto inherit)

标准流盒子，低于浮动的盒子，浮动的盒子又低于定位的盒子。

定位高于浮动，浮动高于标准流。（高低和占不占位置无关）

用法：

1、必须有定位。（除去static之外）。

2、给定 z-index 的值为层级的值。（不给默认为0）

a. 层级为0的盒子，也比标准流和浮动高。
b. 层级为负数的盒子，比标准流和浮动低。
c. 层级不取小数
d. 层级一样，后面的盒子比前面的层级高。
e. 浮动或者标准流的盒子，后面的盒子比前面的层级高。
f. absolute是不占位置的，relative是站位的的。而层级的高低，是和占不占位置没有关系的。