【前端】CSS基础学习

CSS选择器(Cascading Style Sheet，层叠样式表)

css代码写法: h1{color:red;} 选择器{css属性:属性值;}

css代码引入

方式1
    head标签里面写
    <style>
        div{
            background-color: red;
            height: 100px;
             100px;
        }
    </style>
方式2
    内敛样式:
    <div style=" height: 200px; 200px;"></div>
方式3 
    外部文件引入
    head标签里面写link标签
    <link rel="stylesheet" href="文件路径">

 

css选择器

基本选择器

元素选择器:
    div{  #标签名字
         color:red;
    }
id选择器:id值不能重复
    <div id="xuefei">
        雪飞大美女
    </div>
    
    #xuefei{  
        color:green;
    }
类选择器: 类值可以重复
    <div id="dazhuang" class="c1">
        大壮dsb
    </div>
    <div id="xuefei" class="c1">
        雪飞大美女
    </div>
    
    .c1{
        color: green;
    }
    
    div.c1{ #div标签里面含有class值为c1的标签
        color: green;
    }
通用选择器
*{ #找到所有的标签
    color: green;
}
​

 

组合选择器

后代选择器

div a{   #找到div标签后代里面的所有a标签
    color:red;
}

儿子选择器

div>a{ #找到div的儿子标签这一代的a标签
    color:red;
}

毗邻选择器

div+a{  #找到是紧挨着div标签的下一个标签(是兄弟标签)
     color: red;
}

弟弟选择器

div~a{  #找到的是同级的后面的所有兄弟标签
    color: red;
}

 

属性选择器

    #通过属性名来查找
    [title]{ #找到所有含有title属性的标签  
        color: red;
    }
    
    div[title]{  #含有title属性的div标签
        color: red;
    }
    #通过属性名对应的值来查找,当属性值的值为数字的时候,数字要加上引号[title='666']
    input[type=text]{ #含有type属性,并且type属性的值为text的input标签
        
    }

分组

多个选择器选择的标签设置相同css样式的时候,就可以用分组
div,p{  #div选择器和p选择器共同设置相同的样式,可以逗号分隔
    color:red;
}

伪类选择器

a标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线
​
/* 未访问的链接 */
a:link {
  color: #FF0000
}
​
/* 已访问的链接 */
a:visited {
  color: #00FF00
} 
​
/* 鼠标移动到链接上 */  这个用的比较多,可以应用在其他标签上
a:hover {  
  color: #FF00FF
} 
​
/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
a:active {
  color: #0000FF
}
​
/*input输入框获取焦点时样式*/
input:focus {   #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉
  #outline: none;
   #框里面的背景色
}

伪元素选择器

        /*伪元素选择器*/
        div:first-letter{
            color: red;
            font-size: 20px;
        }
        /*在p标签内容的前面插入一些内容*/
        p:before{
            content: '?';
            color: green;
            font-size:100px;
        }
        /*在p标签内容的后面插入一些内容*/
        p:after{
            content: '哈哈!';
            color: pink;
        }

 

选择器的优先级

      /*优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式*/
        /*id选择器优先级为100*/
        /*#d1{*/
            /*color:deepskyblue;*/
        /*}*/
        /*!*继承的优先级为0*!*/
        /*body{*/
            /*color:red;*/
        /*}*/
        /*!*类选择器的优先级是10*!*/
        /*.c1{*/
            /*color: blue;*/
        /*}*/
        /*.c2{*/
            /*color: orange;*/
        /*}*/
        /*!*元素选择器优先级是1*!*/
        /*div{*/
            /*color: green;*/
        /*}*/
        内敛样式优先级为1000
        <p class="cc3" style="color: red;">我是cc3的p标签</p>
        
        important优先级最高,最牛逼
        .cc1 .cc3 {
            color: purple!important;
        }

 

css属性相关

高度宽度设置,注意:只有块级标签能够设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的

    div{
             100px;  宽度
            height: 100px; 高度
            
        }

 

补充:a标签的字体颜色设置必须选中a标签才行

.c1 a{  
    color: red;
}

 

字体属性

字体

.c1{
    font-family: '楷体','宋体','微软雅黑';
}

字体大小

.c1{
            /*font-family: '楷体','宋体','微软雅黑';*/
            font-size:14px; 默认字体大小为16px.
            
        }

字体颜色

color:red;

子重,粗细

 .c1{
           
            font-weight: bold;
            font-weight: 100;
        }
        
​
值   描述
normal  默认值，标准粗细
bold    粗体
bolder  更粗
lighter 更细
100~900 设置具体粗细，400等同于normal，而700等同于bold
​

颜色表示方式

        p{
            /*color: red;*/
            /*color: #78FFC9;*/
            /*color: rgb(123,199,255);*/
             color: rgba(123,199,255,0.3);  多了一个透明度的数字:0-1的一个数字
        }

文字属性

文字对齐

    text-align
    
    div{
             200px;
            height: 200px;
            background-color: yellow;
            /*text-align: center;*/
            text-align: right;
        }
        
    left    左边对齐 默认值
    right   右对齐
    center  居中对齐

文字装饰

    text-decoration
    
    div a{
            /*text-decoration: none;*/  #给a标签去除下划线
            /*text-decoration: line-through;*/
            text-decoration: overline;
        }
    值   描述
    none    默认。定义标准的文本。
    underline   定义文本下的一条线。
    overline    定义文本上的一条线。
    line-through    定义穿过文本下的一条线。

首行缩进

p {
  text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px
}

 

背景属性

背景颜色
background-color: red;
​
    div{
             600px;
            height: 600px;
            /**/
            /*background-image: url("yeye.jpg");*/
            /*background-repeat: no-repeat;*/
            /*background-position: 100px 50px;*/  相对于div标签的,距离左边100px,距离上面50px
            background:url("yeye.jpg") no-repeat left center;
            /*background-position: right top;*/
​
        }
简写方式,颜色  图片路径 是否平铺 图片位置
background:#ffffff url('1.png') no-repeat right top;
        

 

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
background-color: red;
height: 500px;
200px;
}
.c2{
background-color: green;
height: 500px;
200px;
}

.s1{
position: fixed; /*固定定位,位置是根据浏览器窗口来的*/
/*top:20px;*/
left: 20px;
bottom: 20px;
background-color: blue;
height: 40px;
80px;
text-align: center;

line-height: 40px; /* 和标签高度一致,标签内容就垂直居中 */

}
.s1 a{
color: white;
text-decoration: none;
}
</style>
</head>
<body>

<!--<a name="top">这里是顶部,亲爱的</a>--> <!-- 锚点 -->
<div id="top">这是顶部</div> <!-- 锚点 -->

<div class="c1"></div>
<div class="c2"></div>

<span class="s1">
<a href="#top">回到顶部</a> <!-- 触发锚点 -->
</span>

</body>
</html>

锚点设置的两种方式
<!--<a name="top">这里是顶部,亲爱的</a>--> <!-- 锚点 -->
<div id="top">这是顶部</div> <!-- 锚点 -->
触发锚点的a标签写法
<a href="#top">回到顶部</a> <!-- 触发锚点 -->