CSS总结 - 技术栈

CSS(Cascading Style Sheets)层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS的导入方式

优先级：就近原则

行内样式

在标签元素中编写一个style属性，编写样式即可。不符合结构与表现分离

css 复制代码

<h1 style="color:red">标题</h1>

内部样式

html 复制代码

<style>
    h1{
        color:green;
    }

</style>

外部样式

链接式

html 复制代码

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

导入式

html 复制代码

<style>
        @import url("../css/aa.css");
</style>

选择器

基本选择器

选择页面上的某一个或者某一类元素

优先级不遵循就近原则，id选择器>clss选择器>标签选择器

标签选择器

选择一类标签

标签名+{}

html 复制代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: green;
        }
    </style>
</head>
<body>
<h1>标题1</h1>
<h1>标题2</h1>
</body>

类选择器

.+类名{}

可以多个标签归类是同一个class，可以复用

html 复制代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hi{
            color: green;
        }
        .hello{
            color: aliceblue;
        }
    </style>
</head>
<body>
<h1 class="hi">标题1</h1>
<h1 class="hello">标题2</h1>
</body>

ID选择器

ID必须保证全局唯一

#id名称+{}

html 复制代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #hi{
            color: green;
        }
        #hello{
            color: aliceblue;
        }
    </style>
</head>
<body>
<h1 id="hi">标题1</h1>
<h1 id="hello">标题2</h1>
</body>

层次选择器

后代选择器

在某个元素的后面

css 复制代码

    <style>
        body p{
            background: blue;
        }
    </style>

子选择器

只有一代有效果

css 复制代码

    <style>
        body>p{
            background: blue;
        }
    </style>

相邻兄弟选择器

只有一个，相邻(向下)

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>awa</title>
    <style>
        .active+p{
            background: aqua;
        }
    </style>

</head>
<body>
    <p class="active">2</p>
    <p>3</p>
    <ul>
        <li>
            <p>4</p>
        </li>
        <li>
            <p>4</p>
        </li>
    </ul>
</body>
</html>

只有3变色

通用选择器

当前选中元素向下的所有元素

css 复制代码

    <style>
        .active~p{
            background: aqua;
        }
    </style>

结构伪类选择器

伪类：条件

ul的第一个子元素

css 复制代码

    <style>
        ul li:first-child{
            background: blue;
        }
    </style>

ul的最后一个子元素

css 复制代码

    <style>
        ul li:last-child{
            background: bisque;
        }
    </style>

属性选择器

id等于first的元素

=代表绝对等于

css 复制代码

    <style>
        a[id="first"]{
            background: blue;
        }
    </style>

class中有link的元素

*=表示包含

css 复制代码

    <style>
        a[class*="links"]{
            background: blue;
        }
    </style>

herf中以http开头的元素

^=表示以这个开头

css 复制代码

    <style>
        a[herf^=http]{
            background: blue;
        }
    </style>

herf中以pdf结尾的元素

$=以这个结尾

css 复制代码

    <style>
        a[herf$=pdf]{
            background: blue;
        }
    </style>

美化网页元素

span

套住重点要突出的字

css 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>awa</title>
    <style>
        #title1{
            font-size:50px;
        }
    </style>

</head>
<body>
    欢迎学习<span id="title1">Java</span>
</body>
</html>

字体样式

字体类型 font-family

大小 font-size

粗细 font-width bold 加粗 lighter 更细

颜色 color

css 复制代码

    <style>
        body{
            font-family: 楷体;
            font-size: 50px;
            font-weight: bold;
            color: blue;
        }
    </style>

文本样式

颜色

css 复制代码

    <style>
        h1{
            color: #FF0000;
        }
    </style>

rgb

css 复制代码

    <style>
        h1{
            color: rgb(0,255,255);
        }
    </style>

rgba 透明度

css 复制代码

    <style>
        h1{
            color: rgba(0,255,255,0.1);
        }
    </style>

test-align: center 文本居中 left right

首行缩进 text-indent

行高 line-height

text-decoration

下划线 underline

中划线 lint-through

上划线 overline

css 复制代码

    <style>
        h1{
            color: rgb(0,255,255);
            text-align: center;
            text-indent: 2em;
            line-height: 300px;
            text-decoration: underline;
        }
    </style>