前端学习css - 技术栈

css

层叠样式表（Cascading Style Sheets)

CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式和结构分离

css控制页面的展示效果

html 决定页面结构

基础语法规范

选择器+{一条/N条声明}

选择器决定针对谁修改（找谁）
声明决定修改啥（干啥）
声明的属性是键值对，使用；区分键值对，使用：区分键和值

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: red;
            font-size: 40px;
        }
    </style>
</head>

<body>
    <p>hello world</p>
    <p>你好</p>
    <h1>hello world</h1>
</body>
</html>

css就像渲染器一样可以改变样式颜色之类的显示效果

引入方式

内部样式表

将css嵌套到html页面中,用<style>，上述代码是内部样式表

行内样式表

行内样式表比内部样式表优先级高

html 复制代码

<h1 style="color: blue; font-size: 50px;">hello world</h1>

外部样式

实际开发中最常用的方式

创建一个css文件
使用link 标签引入css

html 复制代码

<link rel="stylesheet" href="[css文件路径]">

选择器的种类

基础选择器：单个选择器构成

标签选择器
类选择器
id 选择器
通配符选择器

上面用的<p>就是标签选择器
类选择器

html 复制代码

<body>
    <p class="meal">吃饭</p>
    <p class="sleep">睡觉</p>
    <p class="work">工作</p>
    <p class="play game">玩游戏</p>
</body>

css 复制代码

.meal {
    color: red;
}

.sleep {
    color: blue;
}

.work {
    color: green;
}

.play {
    color: purple;
}

.game {
    font-size: 80px;
}

play game可以用play和game叠加

id选择器

以#开头表示id选择器

html 复制代码

<p id="meal">吃饭</p>
    <p id="sleep">睡觉</p>

css 复制代码

#meal {
    color: red;
}
#sleep {
    color: blue;
}

通配符选择器
使用 * 选取所有的标签
通配符选择器在实际应用开发中用来针对页面中所有的元素默认样式进行消除，主要用来消除边距

css 复制代码

* {
    background-color: yellow;
}

复合选择器：把多种基础选择器综合运用起来

后代选择器
子选择器
并集选择器
伪类选择器

后代选择器

html 复制代码

<ul>
        <li id="meal">吃饭</li>
        <li id="sleep">睡觉</li>
    </ul>
    <ol class="list">
        <li id="meal">吃饭</li>
        <li id="sleep">睡觉</li>
        <li id="play">
            <a href="#">点击</a>
        </li>
    </ol>

css 复制代码

/* ol li {
            color: red;
        } */
        /* .list li {
            color: red;
        } */
        li a {
            color: red;
        }

伪类选择器,定义元素的状态

a:link 选择未被访问过的链接

a:visited 选择已经被访问过的链接

a:hover 选择鼠标指针悬停上的链接

a:active 选择活动链接（鼠标按下了但是未弹起）

html 复制代码

<a href="#">不跳转</a>
    <br>
    <input type="button" value="按钮">

css 复制代码

<style>
        a {
            color: black;
        }
        a:hover {
            color: red;
        }
        a:active {
            color: green;
        }
        input[type="button"] {
            color: blue;
        }
        input:hover[type="button"] {
            color: red;
        }
        input:active[type="button"] {
            color: green;
        }
    </style>

字体

字体设置

css 复制代码

div {
            font-family: "宋体";
            font-size: 30px;
        }

设置字体颜色

css 复制代码

color:red;
color:#ff0000;
color:rgb(255,0,0);

字体粗细

css 复制代码

font-weight: lighter;  粗细
font-style: oblique;	斜体

文本对齐

css 复制代码

h1 {
            text-align: left;
            /* tdext-decoration: overline; */
        }
        h2 {
            text-align: center;
            text-decoration: line-through;  删除线
        }
        h3 {
            text-align: right;
        }
        p {
            text-indent: 2em;  首行缩进
            text-decoration: underline;    下划线
        }
        a {
            text-decoration: none;   无下划线
        }

背景设置

css 复制代码

<style>
        body {
            background-color: #23aeb8;   背景颜色
        }
        div {
            background-image: url(../img/man.png);	背景图片
            background-repeat: no-repeat;	背景平铺方式
            width: 700px;	宽
            height: 400px;	高
            background-position: center;		背景位置
        }
    </style>

background-position: x y;

圆角矩形

css 复制代码

border-radius:length;

css 复制代码

div {
            width: 400px;
            height: 400px;
            border: 2px green solid;
            /* border-radius: 200px; */  圆形
            /* border-radius: 50%; */  圆形
            /* border-top-left-radius: 20px;	左上
            border-top-right-radius: 50px;	右上
            border-bottom-right-radius: 100px;	右下
            border-bottom-left-radius: 200px; */	左下
            border-radius: 20px 50px 100px 200px;
        }

元素显示模式

块级元素
行内元素

css 复制代码

 a {
            display: block;
        }

将行级元素转化为块级元素

盒模型

边框 border
内容 content
内边距 padding
外边距 margin

border

css 复制代码

div {
            width:200px;
            height:200px;
            /* border-width: 10px;
            border-style: solid;
            border-color:green; */
            border: 10px solid green;
            box-sizing: border-box;   不改变盒子的大小
        }

padding

css 复制代码

div {
            width: 200px;
            height: 200px;
            /* padding-left: 20px;
            padding-top: 20px; */
            /* padding: 20px; */
            padding: 20px 10px 30px 40px;/* padding: 上 右 下 左 */
        }

外边距

css 复制代码

div {
            border: solid green 5px;
            width: 200px;
            height: 100px;
            /* margin-top: 20px;
            margin-right: 30px;
            margin-bottom: 40px;
            margin-left: 50px; */
            /* margin: 20px 30px 40px 50px;margin: 上 右 下 左  */
            /* margin:auto; */
            text-align: center;
            
        }

弹性布局

css 复制代码

div {
            border: solid green 5px;
            width: 400px;
            height: 200px;
            margin: 20px auto;
            display: flex;
            /* justify-content: space-between; */
            align-items: end;

        }
        div span {
            width: 50px;
            height: 50px;
            background-color: #23aeb8;
            text-align: center;
            line-height: 50px;
        }