CSS学习笔记

CSS层叠样式表

美化页面。css2.0=div+css ---> css2.1=浮动 + 定位 --->css3.0=圆角、阴影、动画.....

css样式：

内联

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    h1{
        color:burlywood;
    }    
</style>

</head>

外联

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<link rel="stylesheet" href="css/c1.css">
</head>

css优先级：就近原则

css优点：

内容和表现分离
可以实现复用

css选择器

1.基本选择器： 优先级：id > 类 > 标签

标签选择器

h1{
    color:red;
    background: rgb(235, 162, 162);
    border-radius: 60px;
}

类选择器，class名字可以重复，可以实现css代码的复用

.kk{
    color:red;
    background: rgb(235, 162, 162);
    border-radius: 60px;
}

id选择器，id名必须唯一

#kk{
    color:red;
    background: rgb(235, 162, 162);
    border-radius: 60px;
}

2.层次选择器

后代选择器（选择所有后代），用空格连接

body p{
    color:red;
    background: rgb(235, 162, 162);
    border-radius: 100px;
}

子代选择器（选择所有子代），用符号 >连接

body>p{
    color:red;
    background: rgb(235, 162, 162);
    border-radius: 100px;
}

相邻弟弟选择器（选择相邻的一个弟弟），用符号+连接

.mm + p{
    color:red;
    background: rgb(235, 162, 162);
    border-radius: 100px;
}

弟弟选择器（选择当前元素的所有弟弟），用符号~连接

.mm ~ p{
    color:red;
    background: rgb(235, 162, 162);
    border-radius: 100px;
}

3.结构伪类选择器

/* 选中ul的第一个子元素 */
ul li:first-child{
    color:red;
    background: rgb(235, 162, 162);
    border-radius: 100px;
}
/* 选中ul的最后一个子元素 */
ul li:last-child{
    color:rgb(117, 39, 39);
    background: rgb(235, 162, 162);
    border-radius: 100px;
}

/* p:nth=>定位到p元素的父级， chlild（1）=>选中子级的第1个，若第一个孩子是p元素=>选中，如果不是，不选中不进行渲染 */
p:nth-child(2){
        color:rgb(117, 39, 39);
        background: rgb(235, 162, 162);
        border-radius: 100px;
}

/* p:nth=>定位到p元素的父级， chlild（1）=>选中子级的第1个p元素 */
p:nth-of-type(1){
        color:rgb(117, 39, 39);
        background: rgb(235, 162, 162);
        border-radius: 100px;
}

4.属性选择器（常用）

/*  = 精确选中 */
a[id=a]{
    background-color: rgb(238, 215, 220);
}
/* *= "" 模糊选中  */
a[id*="a"]{
    background-color: rgb(238, 215, 220);
}
/* ^ 选中以 http 开头的所有的a元素  */
a[herf^="http"]{
    background-color: rgb(238, 215, 220);
}
/* $ 选中以 http 结尾的所有a元素  */
a[herf$="http"]{
    background-color: rgb(238, 215, 220);
}

字体样式

span标签：重点要突出的字，使用span标签套起来

字体 font

p {
    /* 字体 */
    font-family: 楷体;
    /* 字体粗细 */
    font-weight: bold;
}

h2 {
    /* 字体大小 */
    font-size: 50px;
    /*     斜体     更细    大小   字体 */
    font: oblique lighter 80px "楷体";
}

文本样式

    /* 文本居中 */
    text-align: center;
    /* 首行缩进 */
    text-indent: 2em;
    /* 超链接去下划线 */
    text-decoration: none;

文本阴影和超链接伪类

超链接伪类
/* 鼠标悬停颜色 */
a:hover{
    background: rgb(235, 61, 61);
}
/* 鼠标点击颜色 */
a:active{
    color: lawngreen;
}
/* 鼠标点击后颜色 */
a:visited{
    color: gray;
}
阴影
#yy{
    /*          阴影颜色          水平偏移 垂直偏移  阴影半径 */
    text-shadow: rgb(26, 4, 4) 10px 10px 5px;
}

列表样式

ul{
     500px;
    /* none=>去掉原点 square=>正方形 circle=>空心原点*/
    list-style-type: square;
    background-color: rosybrown;
}

背景渐变

渐变网站：https://uigradients.com/#MoonlitAsteroid

body {
    text-align: center;
    background: #232526;
    background: -webkit-linear-gradient(to right, #414345, #232526);
    background: linear-gradient(to right, #414345, #232526);
}

盒子模型和边框阴影

padding：内边距
margin：外边距
border：边框

#app {
     400px;
    /*     粗细程度  虚线    紫色 */
    border: 5px dashed rebeccapurple;
    /* 外边距的妙用 ==> 实现盒子居中 */
    margin: 0 auto;
    /* 文本居中 */
    text-align: center;
}

圆角边框

#app {
     400px;
    height: 400px;
    /* 取正方形边长的一半 */
    border-radius: 200px;
}

盒子阴影

/*      阴影颜色  x偏移量 y偏移量 阴影大小 */
box-shadow:yellow 10px 10px 1000px ;

实现行内元素的排列方式——>display和浮动

/* inline-block 既是行内元素--也是块元素 */
display: inline;
display: block;
display: inline-block;

/* 左右浮动 */
float: right;
float: left;

/* 右侧不允许有浮动的元素，如果有就另起一行 */
clear:right;
/* 左侧不允许有浮动的元素，如果有就另起一行 */
clear:left;
/* 两侧不允许有浮动的元素，如果有就另起一行 */
clear:both;

overflow，父类边框塌陷问题

增加父级元素的高度height
增加一个新的div

overflow

/* 超过了父类边框的部分 --> 隐藏 */
overflow: hidden;
/* 超过了父类边框 --> 会出现一个滚动条 */
overflow: scroll;

定位

相对定位和绝对定位

相对定位：相对于原来的位置进行偏移，原来的位置会被保留

    /* 相对定位 */
    position: relative;
	top: 10px;

绝对定位：相对于父类或者浏览器进行偏移，原来的位置不会被保留--->原位置没有了

/* 父相子绝 */
position: absolute;

固定定位：随滚动条的滑动而滑动，对于屏幕来说位置不变

position: fixed;

z-index和透明度

z-index：默认是0，最高~999。从下层往上，显示最大的z-index元素。

    ul {
        position: relative;
        list-style: none;
    }
    
    #xx {
         500px;
        position: absolute;
        bottom: 50px;
        background-color: black;
        z-index: 99;
        color: blanchedalmond;
    }
   
    #ks {
         520px;
        position: absolute;
        background-color: red;
        bottom: 50px;
    	/* 优先级最高 */
        z-index: 999;
    }

透明度：

/* 透明度：0 ~ 1。 0-->全透明   1-->不透明 */
opacity: 0.2;

动画（一般都有JS实现）

css可以实现一些简单的动画（css实现动画比较繁琐）。

2D转换：平移，旋转

菜鸟教程css：https://www.runoob.com/css3/css3-2dtransforms.html