CSS-基础-层叠样式表

CSS

• Cascading Style Sheet 层叠级联样式表
• CSS：表现层（美化网页）：字体边距，高度，宽度，背景图片，网页定位，网页

基本语法：

 <!--规范,<style>可以编写CSS代码,每一个声明最好使用分号结尾
    语法:
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <style>
        h1{
        color:red;
        }
    </style>

CSS的优势

• 内容表现分离
• 网页结构表现统一，可以实现复用
• 样式十分丰富
• 建议使用独立于HTML的CSS文件
• 利用SEO，容易被搜索引擎收录

CSS的三种导入方式

优先级：就近原则，谁离元素更近，就用谁

1. 行内样式：在标签元素中，编写一个style 属性，编写样式即可

<h1 style="color: brown">我是标题</h1>

2. 内部样式：在head中style模块中编写

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

3. 外部样式

新建一个CSS文件写入：
h1{
color:red;
        }

在HTML头部加入链接：
链接式：
    <link rel="stylesheet" href="CSS/style.css">
导入式：
    <style>
        @import url("CSS/style.css");
    </style>
    

CSS选择器

• 作用：选择页面上的某一个或者某一类元素

基本选择器

优先级：

• 选择器不遵循就近原则
• id选择器 > class选择器 > 标签选择器

标签选择器

/*标签选择器:会选择到页面上所有这个标签的元素*/
h1{
    color: aqua;
}

类选择器 class

• 可以多个标签归类，是同一个class，可以复用
• 可以跨标签

<style>
        /*类选择器的格式:
        .class的名称{}
        */
        .class1{
            color: yellow;
        }
        .class2{
            color: brown;
        }
    </style>

<h1 class="class1">哈哈</h1>
<h1 class="class2">haha</h1>
<h1 class="class1">haha</h1>

ID选择器

• ID是全局唯一的

 /*id选择器格式:
        #id名称{}
        */
        #h1{
            color: brown;
        }
        #h2{
            color: brown;
        }
        #h3{
            color: brown;
        }

<h1 id="h1" class="class1">哈哈</h1>
<h1 id="h2" class="class2">haha</h1>
<h1 id="h3" class="class2">haha</h1>

高级选择器

层次选择器

1. 后代选择器：在某个元素的后面

        /*后代选择器
        格式:层名称 标签类型名称{}
        例子:ul标签里面所有的p标签
        */
        ul p{
            background: brown;
        }

2. 子选择器

/*子选择器
        选择范围:层下第一层这种类型标签
        格式: 层名称>标签类型名称{}
        例子:body下的p标签
        */
        body>p{
            background: yellow;
        }

3. 相邻兄弟选择器

         /*相邻兄弟选择器
        选择范围:选择class的向下第一个选择类型的标签
        格式:先在标签中定义一个class然后:
            .class +元素类型名{}
        例子:class1向下第一个p标签
        */
        .class1 +p{
            background: aqua;
        }

4. 通用选择器

/*通用选择器
       选择范围:选择class向下所有选择类型的标签
        格式:先在标签中定义一个class然后:
            .class~元素类型名{}
        例子:class1向下所有p标签
        */
        .class1~p{
            background: black;
        }

结构伪类选择器（:）

 <style>
        /*标签下的第一个元素*/
        ul li:first-child{
            color: brown;
        }
        /*标签下的最后一个元素*/
        ul li:last-child{
            color: yellow;
        }
        /*定位到父元素，选择父元素的第N个子元素，并且是当前元素才生效，顺序选择*/
        p:nth-child(1){
            color: aqua;
        }
        /*定位到父元素，选择父元素的第N个和当前元素相同的子元素，顺序选择*/
        p:nth-of-type(2){
            color: brown;
        }
    </style>

属性选择器(常用)

• id + class 结合
• = 绝对等于
• *= 包含
• ^= 以什么开头
• $= 以什么结尾

a[id=""]{}
a[class=""]{}

美化网页

字体，文本样式

span标签：约定俗成用来标记

<span id="title">java</span>

字体样式

<style>
        /*字体样式：
        font-family：字体
        font-size：字体大小
        font-weight：字体粗细
        color：字体颜色*/
        body{
            font-family:楷体;
        }
        h1{
            font-size: 50px;
        }
        p{
            font-weight: bold;
        }
    </style>

文本样式

• 颜色
• 对齐方式
• 首行缩进
• 行高
• 装饰

<style>
       /*文本样式:
         颜色:
            单词表示
            RGB：0-F
            RGBA：0-1透明的
        对其方式:
        text-algin:
            center:剧中
            left:靠左
            right:靠右
        首行缩进:
            text-indent:2em
            em:两个空格
        行高:
            line-height:一行的高度
        装饰:
           text-decoration: underline:下划线
           text-decoration: line-through:中划线
           text-decoration: overline:下划线
        文本图片水平对齐:
            vertical-align:middle
         */
       h1{
           color: red;
           /*color: #FFFFFF;*/
           /*color: rgb(0,255,255);*/
           /*color: rgba(0,255,255,0.5);*/

           text-align: center;
       }
       p{
           text-indent: 2em;
           background: yellow;
           height: 200px;
           line-height: 200px;
           text-decoration: underline;
           text-decoration: line-through;
           text-decoration: overline;
       }
        img,span{
            vertical-align:middle;
        }
    </style>

超链接伪类

<style>
        /*默认状态*/
        a{
            color: black;
            text-decoration: none;
        }
        /*鼠标悬停状态*/
        a:hover{
            color: yellow;
            font-size: 30px;
        }
        /*鼠标点击按住状态*/
        a:active{
            color: red;
        }
        a[id=price]{
            /*参数:阴影颜色 水平偏移 垂直偏移  阴影半径*/
            text-shadow: aqua 10px 10px 10px;
        }
    </style>

列表

<style>
        #nav{
            width: 500px;
            /*background: rgba(0, 0, 255, 0.5);*/
        }
        .title1{
            font-size: 18px;
            font-weight: bold;
            text-indent: 1em;
            line-height: 35px;
            background: darkorange;
        }
        /*列表的样式:
        list-style: none;去掉原点
                    cricle:空心圆
                    decimal:数字
                    square:方形
        */
        ul li{
            color: black;
            height: 30px;
            list-style: none;
            text-indent: 1em;/*缩进*/
        }
        ul{
            background: rgba(0, 0, 255, 0.25);
        }
        a{
            text-decoration: none;  /*去下划线*/
            font-size: 20px;
        }
        a:hover{
            background: red;
        }
    </style>

背景

    <style>
        div{
            width: 1000px;
            height:1000px;
            border: 2px red solid;
            background-image: url("../../resoutces/images/2.jpg");
            /*默认是全部平铺的*/
        }
        .div1{
            /*颜色 图片 位置 排列方式*/
            background: red url("../../resoutces/images/2.jpg") 0px 0px no-repeat;
            /*水平平铺*/
            /*background-repeat: repeat-x;*/
        }
        .div2{
            /*垂直平铺*/
            background-repeat: repeat-y;
        }
        .div3{
            /*不平铺*/
            background-repeat: no-repeat;
        }
    </style>

渐变

 <style>
        /*径向渐变 圆形渐变*/
        body{
            background-color: #FFFFFF;
            background-image: linear-gradient(135deg, #FFFFFF 0%, #6284FF 50%, #FF0000 100%);
        }
    </style>

渐变配色网站

盒子模型

盒子大小 = margin + padding + border + 内容宽度

• margn：外边距
• padding：内边距
• border：边框
  • 颜色
  • 粗细
  • 样式

边框：

 /*实线*/
        div:nth-of-type(1) input{
            border: 2px solid black;
        }
        /*虚线*/
        div:nth-of-type(2) input{
            border: 2px dashed black;
        }

外边距：（margin）

• 参数有上下左右

            /*外边距的妙用:居中元素*/
            margin:0 auto;
            margin:0 0 0 0;
            margin:0;

内边距：padding

            padding: 10px;
            padding: 0 10px;            
            padding: 0 0 0 0;

圆角边框：（border-radius）

/*圆角边框:
            参数顺序:左上 右上 右下 左下 :顺时针方向
            */
            border-radius: 30px;

阴影：（box-shadow）

            /*边框阴影:
            */
            box-shadow: 10px 10px yellow ;

浮动

display（方向不可控）

• 块级元素：独占一行

  • h1-h6
  • p
  • div
  • 列表

• 行内元素：不独占一行

  • span
  • a
  • img
  • strong

• 行内元素可以包含在块级元素中，反之，则不可以

float（常用）

• 浮动起来会脱离标准文档流，要解决父级边框塌陷问题

• 左右浮动

<style>
        /*display:
        block:块
        inline-block:行内块
        inline:行元素
        none:消失
        */
        /*浮动:float
        */
        div{
            width: 100px;
            height: 100px;
            border: 2px solid red;
            display: inline-block;
            float: left;
        }
        span{
            width: 100px;
            height: 100px;
            border: 2px solid red;
            display: inline-block;
            float: right;
        }
    </style>

父级边框塌陷

1. 增加父级元素的高度：不灵活
2. 增加一个空的div标签，清除浮动。

• 要避免产生空div

.clear{
            margin: 0;
            padding: 0;
            clear: both;
        }

3. overflow：在父级元素的增加一个overflow：hidden

• 简单，但是会产生下拉

 #father{
            border: red solid 2px;
            overflow: hidden;
        }

4. 在父类中添加一个伪类（推荐使用）

#father:after{
            content: "";
            display: block;
            clear: both;
        }

定位

相对定位：position：relative

• 相对于原来的位置，进行指定的偏移
• 它任然在标准文档流中，原来位置会被保留

top:-20px;
left:20px;
bottom:-10px;
right:20px;

绝对定位（position: absolute;）

• 基于xxx定位，上下左右
  • 没有父级元素定位的前提下，相对于浏览器定位
  • 假设父级元素存在定位，我们相对于父元素进行偏移
  • 在父级范围内移动
  • 绝对定位后，不在标准文档流中了，原来的位置不会被保留。

#second{
            background: #6284FF;
            border: 2px dashed red;
            position: absolute;
            top:30px;
        }

固定定位（fixed）

• 固定在网页上不动。

 #second{
            background: #6284FF;
            border: 2px dashed red;
            position: fixed;
            right: 0;
            bottom: 0;
        }

z-index（图层的概念）

• 从0开始
• opacity：背景透明度
• 当元素重合，用z-index来设置显示的优先级，层级

Less：官网