CSS

css选择器

属性操作（一）

属性操作（二）

 

css概念

一.CSS概述
    CSS是Cascading Style Sheets，中文称为层叠样式表，对html标签的渲染和布局
    CSS规则是由两个主要的部分构成：选择器，以及一条或多条声明
    结构：
    选择器 {
        属性：值
        属性：值
    }

 

css四种引入方式

二.css四种引入方式
    1.行内引入
    2.内嵌式
    3.链接式（推荐）：可以增加开发效率
    4.导入式
        
    总结：
    导入式会在整个网页加载后在加载css文件，导致的问题就是如果一个网页太大则会出现先显示无样式的页面，闪烁一下再出现网页的样式
    链接式会以网页文件主题装载前加载css文件，因此显示出来的网页从一开式就是带效果的
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入方式</title>
    <!--第二种嵌入式-->
    <style>
        body {
            margin: 0;
            background-color: black;
        }
        p {
            color: black;
        }
    </style>
    <!--第三种链接式-->
    <link rel="stylesheet" href="a.css">
    <!--第四种导入式-->
    <style type="text/css">
        @import "b.css";
    </style>
</head>
<body>
<!--第一种行内引入-->
<p style="background-color:red; margin: 0;">你好</p>
<p style="color: blue;margin:0">你好</p>
<div>
    nihao
</div>
</body>
</html>
四种引入方式对比
a.css
div {
    background-color:green;
}

b.css
div {
    color: aliceblue;
}
css文件

 

css选择器

一基本选择器

    一。基础选择器
        1.标签选择器
            匹配所有p标签
            p {color:red}
        2.id选择器
            匹配对应的id
            #id{color:red}
        3.class选择器
            匹配一类
            .class{color:red}
        4.通配选择器 
            *{color:red}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        /*标签选择器*/
        p {
            /*margin: 2px;*/
            color:royalblue;
            background-color:beige;
        }
        /*id选择器*/
        #p1 {

            margin: 0;
            color: red;
            font-family: 华文彩云;
            font-size: 40px;
            background-color: blue;
        }
        /*类选择器*/
        .d1{
            color: royalblue;
        }
        /*通配符选择器*/
        *{
            margin: 0;
            background-color: yellow;
        }
    </style>
</head>
<body>
<p>这是一个p标签</p>
<p id="p1" align="center">通过id找p</p>

<div class="d1">
    <div>
        <span>span的内容</span>
    </div>
</div>

<p class="d1">p的内容</p>

</body>
</html>
基本选择器

 

二组合选择器

    二。组合选择器
        1.后代选择器（不分层级，只让P变色）
        
        2.子代选择器（只在儿子层找）
        
        3.毗邻选择器（紧挨着下面一个，找相邻的，找下面，不着上面）
        
        4.兄弟选择器（同一级别，都找）
        
        5.多元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*div后代只要有p都会找*/
        /*div   p {*/
            /*color:royalblue;*/
            /*background-color: rosybrown;*/
            /*font-size: 30px;*/
        /*}*/
        /*类名为a1的后代p标签*/
        /*.a1 p{*/
            /*margin: 0;*/
        /*}*/

        /*子代选择器 类名为a1子代p标签*/
        /*.a1>p{*/
            /*font-family: 华文彩云;*/
        /*}*/

        /*兄弟选择器 全部都找*/
        .a1~p{
            font-size: 20px;
            color: royalblue;
        }

        /*毗邻选择器 只会向下找第一个*/
        /*.a3+p{*/
            /*font-family: 华文彩云;*/
        /*}*/

        /*多元素选择器*/
        /*选中类名a1的和p标签*/
        .a1 ,p{
            font-size: 20px;
        }

    </style>
</head>
<body>
<p>pppp</p>
<div class="a1">
    <p>这是第一个div  第一个p标签</p>
    <span>你好</span>
    <div class="a2">
        <p>p标签</p>
        <div class="a3">
            <span>这是第一个 div div div的span标签</span>
        </div>
        <p>这是第一个div div 第二个p标签</p>
        <p>这是第一个div div 第三个p标签</p>
        <p>div p第二个p标签</p>
    </div>
</div>
<div class="a1">
    <div class="a2">
        <span>这是第二个div div span标签</span>
    </div>
    <p>这是第二个 div 第一个p标签</p>
    <p>这是第二个 div 第二个p标签</p>
</div>
<p>外面的p表片</p>
</body>
</html>
5中组合选择器

 

三伪类选择器

        1.a:link
            设置还没有点击的链接的颜色
        
        2.a：visited
            点击过后的颜色设置
        3.a：hover
            鼠标放上链接的颜色
        4.a：active
            鼠标点下去的那一刻的颜色
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        a:link{
            color: red;
        }
        a:visited{
            color: black;
        }
        a:hover{
            color: gray;
        }
        a:active{
            color: royalblue;
        }
        p:before{
            content:"hello";
            /*color:red;*/

        }
        p:after{
            content: 'haha';
        }
        p:first-letter{
            color: red;
            font-size:40px;
            text-transform: uppercase;
        }
    </style>
</head>
<body>
<p>d你好</p>
<a href="">点我</a><br>


</body>
</html>
伪类和伪元素选择器

 继承和属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>
    <style>
        /*体现了继承如果不写其他标签的css，则会继承body的属性*/
        body {
            background-color:yellow;
            color: royalblue;
        }
        /*属性选择器*/
        p[title]{
            color: red;

        }
    </style>
</head>

<body>

<p title="222">hello</p>
<p title="2">world</p>
</body>
</html>
属性选择器
选择的优先级：
    标签选择器>id选择器>类选择器>通配选择器>组合选择器（选择器越模糊，优先级越低）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器的优先级</title>

    <style>
        #i1 {
            background-color: blue;
        }
        /*div {*/
            /*background-color: red;*/

        /*}*/

    </style>
</head>
<body>


<div id="i1">
    <div id="2">
        <span>你好</span>
    </div>
</div>
<div id="3">
    <div id="4">
        <span>你好</span>
    </div>
</div>

</body>
</html>
标签和id选择器

 

标准文档流

标准文档流
    1.空白折叠现象
        解决办法：在写的时候紧贴着写，不要有空格
        
    2.不同类型的行内元素对准的基线不一样

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标准文档流</title>
    <style>
        div {
            background-color: royalblue;
            color: white;
        }
    </style>
</head>
<body>
<div>
    <span>你好</span><span>你好</span>
    <span>你好</span>
</div>


</body>
</html>
去除空白折叠现象

 

CSS属性介绍

字体属性

字体属性
    1.文字字体
        font-famlily浏览器会支持多种字体，依次往后使用
    
    2.字体大小
        font-size: 14px;
    
    3.字体粗细
        font-weight 
            normal    默认值，标准粗细
            bold    粗体
            bolder    更粗
            lighter    更细
            100~900    设置具体粗细，400等同于normal，而700等同于bold
            inherit    继承父元素字体的粗细值
    
    4.字体颜色（3种方法）
        color：颜色的名称|rgb（）元组|rgba（a是透明度）|十六进制数
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        span {
            font-family: 隶书;
            font-size: 40px;
            font-weight: lighter;
            color: rgba(255,0,0,0.3);
        }

    </style>
</head>
<body>
<span>你好</span>
</body>
</html>
字体属性+颜色属性

 

文本属性

文本属性
    1.文字对齐（必须在块内使用）
        text-align
            left    左边对齐 默认值
            right    右对齐
            center    居中对齐
            justify    两端对齐
    2.文字装饰
        text-decoration 属性用来给文字添加特殊效果。
            none    默认。定义标准的文本。
            underline    定义文本下的一条线。
            overline    定义文本上的一条线。
            line-through    定义穿过文本下的一条线。
            inherit    继承父元素的text-decoration属性的值。            
                        
        <常用的为去掉a标签默认的自划线：>    
        
    3.首行缩进
        text-indent: 32px;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        p {
            margin: 6px;
            font-family: 隶书;
            font-size: 40px;
            font-weight: lighter;
            color: rgba(255,0,0,0.3);
            text-align: center;
        }
        div {
            text-align: left;
            text-indent: 40px;
        }
        a {
            text-decoration: none;

        }
    </style>
</head>
<body>
<p>你好</p>
<div><span>hello</span></div>
<a href="">点我</a>

</body>
</html>
文本属性

 

背景属性

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/
简写：background:#ffffff url('1.png') no-repeat right top;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        body {
            /*background-color: red;*/
            background-image: url("1.jpg");
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>

<div class="d1" >nihao</div>


</body>
</html>
背景属性
背景关联
        如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
        您可以通过 background-attachment 属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：
        
            body 
              {
              background-image:url(/i/eg_bg_02.gif);
              background-repeat:no-repeat;
              background-attachment:fixed
              }

 

display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 100px;
            height:100px;
            background-color: rebeccapurple;
            display: inline-block;
        }
        .c2{
            width: 100px;
            height:100px;
            background-color: burlywood;

        }
        .c3{
            width: 100px;
            height:100px;
            background-color: crimson;
            display: inline;
        }
        .c4{
            width: 100px;
            height:100px;
            background-color: gray;
        }
        .s1{
            display: block;
            width: 200px;
            height: 200px;
            background-color: royalblue;
            /*visibility: hidden;*/  //隐藏了其他的不会顶上去
            /*display:none; //隐藏了其他的会顶上去*/

        }
    </style>
</head>
<body>
<div class="c4">普通行级div</div>
<span class="s1">行内span转变为行级标签</span>
<div class="c1">行级div年后行内块</div>
<div class="c2">年后</div>
<div class="c3">行级div年后变为行内</div>
</body>
</html>
display属性
display属性
    行级标签--》行内标签：display：inline
    行内标签--》行级标签：display：block
    使元素同时具有行内元素和块级元素的特点。(行内块级)：display:inline-block
    display:"none"与visibility:hidden的区别：

    visibility:hidden: （设置后不影响下面的标签）
    可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

    display:none: （设置后该标签直接去掉）
    可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

 

 

css盒子模型

    margin：调整两个标签的距离
    border：内边距和内容外的边框
    padding：内容和边框之间的距离
    content：内容

 

 

float

float浮动：
    三种方式：
        left：向左浮动

        right：向右浮动

        none：默认值，不浮动

 

 

clear

clear清楚浮动：
    left    在左侧不允许浮动元素。
    right    在右侧不允许浮动元素。
    both    在左右两侧均不允许浮动元素。
    none    默认值。允许浮动元素出现在两侧。
    inherit    规定应该从父元素继承 clear 属性的值。
    
    
    #清楚浮动的三种方式：
        固定高度：给父级标签设置height
        伪元素清除法：
            .clearfix:after {
              content: "";
              display: block;
              clear: both;
            }
        overflow:hidden

 

overflow溢出

overflow溢出属性：
    visible    默认值。内容不会被修剪，会呈现在元素框之外。
    hidden    内容会被修剪，并且其余内容是不可见的。
    scroll    内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
    auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
    inherit    规定应该从父元素继承 overflow 属性的值。
    
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圆形的头像示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      background-color: #eeeeee;
    }
    .header-img {
      width: 150px;
      height: 150px;
      border: 3px solid white;
      border-radius: 50%;
      overflow: hidden;
    }
    .header-img>img {
      max-width: 100%;
    }
  </style>
</head>
<body>

<div class="header-img">
  <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt="">
</div>

</body>
</html>

圆形头像示例
圆形头像

 

定位position

定位position：
    static：默认
    relative：相对定位（相对于该元素之前的位置进行定位），不需要设计父级标签有定位元素，只是相对于自身，不会塌陷，还是行级元素，而且其他元素还是在原来的位置
    absolute：绝对定位（相对于父级元素定位过的去定位，没有直接找body），会使得该标签变成block级元素
    fixed：固定

 

　　z-index

z-index：
    谁大谁压着谁

 

posted @ 2019-03-13 18:42  烧刘病  阅读(195)  评论(0)  编辑  收藏  举报
回到页首