CSS

2021-09-06 09:34:04

CSS

CSS快速入门

通过link连接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>你好，欢迎学习CSS！！！</h1>
</body>
</html>

h1{
    color: #571070;
}

导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内联样式-->
    <style>
        h1{
            color: yellow;
        }
    </style>
    <!--外联样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式-->
<h1 style="color: blue">我是表题</h1>
</body>
</html>

style优先级：行内样式最大，其次看哪个离h1近（如上blue>link的color>yellow）
扩展：外部样式两种写法
1. 链接式：link方式
2. 导入式：CSS2.0，在html页面style里面加@import url（“css地址”）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内联样式-->
    <style>
        h1{
            color: yellow;
        }
    </style>
    <!--外联样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--导入式：css2.0-->
    <style>
        @import url(css/style.css);
    </style>
</head>
<body>
<!--行内样式-->
<h1 style="color: blue">我是表题</h1>
</body>
</html>

选择器

Id选择器全局唯一
优先级：Id选择器>类选择器>标签选择器

层次选择器

后代选择器
子选择器
相邻兄弟选择器
通用选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
    <style>
        /*后代选择器 */
        body p {
            background: red;
        }

        /*子选择器 一代，儿子*/
        body p {
            background: blue;
        }

        /*相邻兄弟选择器 只有一个，相邻（向下）*/
        .active + p {
            background: yellow;
        }

        /*通用选择器：通用兄弟选择器，向下所有兄弟*/
        .active ~ p {
            background: green;
        }
    </style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li><p>p4</p></li>
    <li><p>p5</p></li>
    <li><p>p6</p></li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>

结构伪类选择器

伪类a:hover{}
结构伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <!--避免使用class，id选择器-->
    <style>
        ul li:first-child{
            background: blue;
        }
        ul li:last-child{
            background: green;
        }
        /*选中当前元素的父元素的第1个元素,并且是当前元素才生效*/
        p:nth-child(1){
            background: yellow;/*p0不生效*/
        }
        /*选中当前元素的父元素的第2个元素*/
        p:nth-child(2){
            background: yellow;/*生效*/
        }
        /*选中当前元素的父元素的第1个元素*/
        p:nth-of-type(1){
            background: red;
        }
        /*选中当前元素的父元素的第3个元素*/
        p:nth-of-type(3){
            background: grey;
        }
    </style>
</head>
<body>
<h1>p0</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

属性选择器

属性名[属性]{}
属性名[属性=什么]{}
正则：属性名[属性*=什么]{} ----表示包含什么
正则：属性名[属性^=什么]{} ----表示以什么开头
正则：属性名[属性$=什么]{} ----表示以什么结尾
正则：属性名[属性^=什么1] [属性$=什么2]{} ----表示以什么1开头并且以什么2结尾

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        a[href="www.baidu.com"]{
            background: red;
        }
        a[href*="www"]{
            background: blue;
        }
        a[href^="http"]{
            background: grey;
        }
        a[href$="www"]{
            background: brown;
        }
        a[href^="1"][href$="1"]{
            background: yellow;
        }
    </style>
</head>
<body>
<a href="www.baidu.com" class="links item first" id="first">a1</a>
<a href="https://www.baidu.com" class="links1 item first" id="first1">a2</a>
<a href="www.baidu.com.cn" class="links2 item first1" id="first2">a3</a>
<a href="1_1www.baidu.com_1" class="links3 item first1" id="first3">a4</a>
<a href="1_2www.baidu.com_2" class="links4 item first2" id="first4">a5</a>
<a href="1_3www.baidu.com_3" class="item first3" id="first5">a6</a>
</body>
</html>

字体样式

font-fanily：英文字体，楷体；
font-size：50px（em：缩进几个字）；
font-weight：字体粗细；
coler：字体颜色；

/*oblique:斜体  bolder:加粗 大小:12px 字体："楷体"*/
p{
	font: oblique bolder 12px "楷体";
}

color：rgb（红，绿，蓝）
color：rgba（红，绿，蓝，颜色深浅）
text-align：center（文本位置居中）
text-indent：2em（首行缩进两个字）
line-height：300px（如：height：300px；当行高和块高相同的时候，可以上下居中）
水平对齐，参照物：

/*span里面的文字和文本框的对齐方式
  top：span里面的文字在顶部
  middle：span里面的文字在中部
  bottom：span里面的文字在底部
*/
span,textarea{
vertical-align: bottom;
}

text-decoration：underline（下划线）/line-through（中划线）/overline（上划线）/none（去下划线）

文本阴影和超链接伪类

a:hover{} ----鼠标悬浮的状态
a:active{} ----鼠标按住未释放的状态
text-shadow：#000000 10px 10px 2px； ----阴影颜色，向右偏移，向下偏移，阴影半径

列表样式

list-style：
1. none ----去掉圆点
2. circle ----空心圆
3. decimal ----数字
4. square ----正方形

渐变

Grabient网址：https://www.grabient.com/

body{
    background: linear-gradient(180deg, #FFFFFF 0%, #72ff62 50%, #ff0059 100%);
}

盒子模型

margin：外边距
padding：内边距
border：边框
圆角边框：border-radius
盒子阴影：box-shadow：10px 10px 100px yellow；
display: block ----块元素
display: inline-block ----既可以行内元素也可以块元素
display: inline ----行内元素

div {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: block;

        }
        span {
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            display: inline-block;
        }

CSS

码农公寓

CSS

CSS快速入门

导入方式

选择器

层次选择器

结构伪类选择器

属性选择器

字体样式

文本阴影和超链接伪类

列表样式

渐变

盒子模型

相关文章