层叠样式表 (Cascading Style Sheets)

1. CSS四种导入方式

行内样式

<h1 style="color: red">
    小鱼儿
</h1>

内部样式

<style>
    h1 {
        color: green;
    }
</style>

外部样式

<link rel="stylesheet" href="style.css">

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

2. CSS选择器

基本选择器

标签选择器

<style>
    h1 {
        color: red;		   /*字体颜色*/
        background: wheat;	   /*背景色*/
        border-radius: 8px;        /*圆角*/
        font-size: 80px;	   /*字体大小*/
    }
    
</style>

<h1>小鱼儿</h1>

类选择器

.class的名称{} 全局不唯一

<style>
    .first {
        color: red;
    }
    .second {
        color: green;
    }
</style>

<h1 class="first">小鱼儿</h1>
<h1 class="second">小鱼儿</h1>
<h1 class="first">小鱼儿</h1>
<p class="second">小鱼儿</p>

id选择器

#id名称{} 全局唯一

优先级 id选择器 > class选择器 > 标签选择器

<style>
    #first {
        color: red;
    }
    #second {
        color: green;
    }
    .first {
        color: pink;
    }
    .second {
        color: purple;
    }
</style>
</head>
    <body>
    <h1 id="first" class="first">小鱼儿</h1>
    <p class="second" id="second">小鱼儿</p>
</body>

层次选择器

<body>
    <p>p1</p>
    <p class="active">p1.5</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>
</body>

后代选择器

body 下的所有 p

body p {
    background: red;
}

子选择器

body 下的儿子 p

body > p {
    background: green;
}

相邻兄弟选择器

只有下面的一个

.active + p {
    background: red;
}

通用选择器

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

.active ~ p {
    background: red;
}

结构伪类选择器

/*ul的第一个子元素*/
ul li:first-child {
    background: green;
}

/*ul的最后一个子元素*/
ul li:last-child {
    background: red;
}

/*选中p1*/
p:nth-child(1) {
    background: pink;
}

/*选中p2*/
p:nth-of-type(2) {
    background: yellow;
}

鼠标特效

a:hover {
    background: yellow;  
}

属性选择器

<p class="demo">
    <a href="http://www.baidu.com" class="links" id="first">1</a>
    <a href="images/123.html" class="links first">2</a>
    <a href="images/123.png">3</a>
    <a href="images/123.jpg">4</a>
</p>

/*修饰*/
.demo a {
        float: left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        background: pink;
        text-align: center;
        color: grey;
        text-decoration: none;
        margin-right: 5px;
        font: bold 20px/50px Arial;
}

/* 属性选择器的使用
   =  绝对等于
   *= 存在即可
   ^= 以之开头
   $= 以之结尾 
*/

a[id="first"] {
    background: yellow;
}

a[class*=" "] {
    background: skyblue;
}

a[href^="http"] {
    background: purple;
}

a[href$=".png"] {
    background: wheat;
}

a:hover {
    background: white;
}

2. 字体样式

<h1>临江仙</h1>
<p>滚滚长江东逝水，浪花淘尽英雄。</p>
<p>是非成败转头空，青山依旧在，几度夕阳红。</p>
<p>白发渔樵江渚上，惯看秋月春风。</p>
<p>一壶浊酒喜相逢，古今多少事，多付笑谈中。</p>

字体

body {
    font-family: 楷体;
}

字号

h1 {
    font-size: 50px;  /*em*/
}

粗体

p {
    font-weight: bold;  /*lighter*/ /*900*/
}

连起来

p {
    font: oblique/*斜体*/ bolder 12px "楷体"; 
}

3. 文本样式

颜色

p {
    color: red;
}

p {
    color: #00ff00; /*红绿蓝*/
}

p {
	color: rgb(0, 255, 255, 0.5);
}

文本对齐的方式

h1 {
    text-align: center; /*left right*/
}

首行缩进

p {
    text-indent: 2em; /*两个字*/
}

行高

p {
    background: pink;
    height: 2em;  
    line-height: 2em;  /*上下居中*/
}

装饰

p {
    text-decoration: underline; /*下划线*/ 
    /* overline     上划线
       line-through 中划线
    */
}

p {
    text-decoration: line-through; /*中划线*/
}

a {
    text-decoration: none; /*去掉超链接的下划线*/
}

文本图片水平对齐

img, span {
    vertical-align: middle;
}

阴影

/*text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
p {
    text-shadow: #ff0000 2px 2px 2px;
}

超链接伪类

a {
    text-decoration: none;  /*去掉下划线*/
    color: #000000;		    /*不要蓝色，要黑色*/
}
a:hover {
    color: orange;			/*鼠标悬停后显示橘色*/
    font-size: 50px;		/*鼠标悬停后字体变大*/
}

4. 列表样式

ul li {
    list-style: none; /*circle square decimal*/
    background: #a0a0a0;
    height: 30px;
    line-height: 30px;
    text-indent: 1em;
}

5. 背景图像

插入图片

/*颜色 图片 图片位置 平铺方式*/
.title {
    background: red url("images/test.png") 270px 10px no-repeat;
}

.title {
    background: red;
    background-image: url("images/test.png");
    background-position: 270px 10px;
    background-repeat: no-repeat;
}

渐变

Grabient

.title {
    background-color: #D9AFD9;
    background-image: linear-gradient(0deg, #D9AFD9 0%, #97D9E1 100%);
}

6. 盒模型

margin 外边距
padding 内边距
border 边框

边框

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
    </form>
</div>

边框的粗细、样式、颜色

#box {
    /*会有一个默认内外边距*/
    margin: 0px; 
    padding: 0px;
    width: 300px;
    /*粗细 样式 颜色*/
    border: 5px solid red;
}

#box {
    border-width: 5px;
    border-style: solid;
    border-color: red;
}

外边距

#box {
    margin: 0px auto; /*上下为0 左右居中*/
}
/*
margin: 0px; 上下左右
margin: 0px 1px 2px 3px;
*/

内边距

#box {
    padding: 10px;
}
/*使用方式和外边距相同*/

圆角边框

#box {
    border-radius: 20px;
}
/*使用方式和外边距相同
  用处 正方形图片改圆形头像*/

阴影

#box {
    box-shadow: 10px 10px 100px yellow;
}

几个搬砖网址

源码之家
模板之家
光年-后台管理系统
LayUI
Element-UI
vue-element-admin
飞冰

display 和浮动

/*
   block 块元素
   inline 行内元素
   inline-block 是块元素，但是可以内联，在一行！
   none
*/
span {
    display: inline-block;
    float: left; /*right*/
}

父级边框塌陷问题：clear，overflow （用到时再了解即可）

7. 定位

相对定位

相对原来的位置，进行指定的偏移。

#first {
    position: relative;
    top: -10px;
    left: 10px;
}

绝对定位

没有父级元素定位的前提下，相对于浏览器定位
假设父级元素存在定位，通常会相对于父级元素进行偏移
在父级元素范围内移动

#second {
    position: absolute;
    right: 0;
    bottom: 0;
}

固定定位

#third {
    position: fixed;
    right: 0px;
    bottom: 0px;
}

z-index

#top {
    z-index: 999; /*最高层*/
}
/* 
   opacity: 0.5; /*透明度*/
*/

【前端】CSS基础