CSS基础总结

最新推荐文章于 2024-04-30 09:57:08 发布

GiGi_

最新推荐文章于 2024-04-30 09:57:08 发布

阅读量390

点赞数 1

分类专栏： Web基础文章标签： css html

本文链接：https://blog.csdn.net/GiGi_/article/details/54729293

版权

Web基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS概述

HTML缺陷
- 不能适应多种设备
- 要求浏览器必须智能化足够大
- 数据和显示没有分开
- 功能不够强大
CSS优点
- 使数据和显示分开
- 降低网络流量
- 使整个网站视觉效果一致
- 提高开发效率

CSS语法

        <style type = "text/css">
        p{  //所有的p标签所应用的样式,只用一个就行
            font-weight:bold;
            font-style:italic;
        }
    </style>

选择器{属性名：属性值 ;}
       选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
       属性名和冒号之间最好不要有空格。

CSS与HTML相结合

CSS中注释，/* */
1,行级样式表:可以写在开始标签里面,采用style属性完成
* <p style = "color:red">你好！</p>
2,内部样式表:采用style标签完成,针对整个页面

    <style type = "text/css">
        p{  
            font-weight:bold;
            font-style:italic;
        }
    </style>

3,外部样式表:采用外部css文件完成,针对多个页面
- 文件中不用写style标签了
- 要想在页面中使用,需要引入
  <link rel = "stylesheet" type = "text/css" href = "a.css"></link>

css选择器

1,基本选择器
- a,标签选择器:就是选择了页面上一类标签

        div{
            border:1px solid red;
        }

* b,类选择器:规定用圆点. 来定义,比较灵活,哪个想用哪个引    //如两个标签用同样的样式

        .one{
            border:1px solid red;
        }

<div class = "one">萌萌哒^_^</div>

* c,ID选择器:用#来定义,针对特定的一个标签用(ID是唯一的)

    #two{
        border:3px dashed green;
    }
    <h2 id = "two">你好</h2>
* d,通用选择器,*来定义,代表页面上所有的标签
    *{
        padding:0px;
        margin:0px;
        color:blue;
    }

* 2,扩展选择器
* a,组合选择器:用逗号隔开多个选择器

        div,p,h1,.one,#two{
            border:5px double blue;
        }

* b,关联选择器(后代选择器):用空格格开,表示
    * h3里面的i标签会变红色,下面的i标签不会变

        h3 i{
                color:red;
            }
            <h3>我爱<b>北京<i>开安门</i></b></h3></br>
            <i>北京</i>

* c,伪类选择器
    * 1):静态伪类:只能用于超链接(2个),:link,:visited
        * link:超链接点击之前的颜色
        * visited:点击之后的颜色
            a:link{
                color:red;
            }
            a:visited{
                color:green;
            }
        * a()与a:link{}区别:
            * a()包括了锚点,a:link{}不包括锚点
    * 2):动态伪类:适用于各种标签
        * :onfocus 控件获得焦点
                input:focus{
                    border:1px solid red;
                    color:green;
                    background-color:#ffccff;
                }
                <input type="text" name="">
        * :active 点击控件的时候
        * :hover 当鼠标移动到某个控件上方的时候

样式表冲突的解决

1,行级 > 内部 > 外部
2,ID选择器 > 类选择器 > 标签选择器
* 外部ID选择器 > 内部标签选择器
* 原则:就近原则,指定义还有引入的位置

link标签的rel属性

rel属性值
- 1,stylesheet:定义样式表
- 2,alternate stylesheet:候选样式表

css各种属性

字体属性

        p{
            font-size:30px;
            font-family:华文彩云,幼圆,宋体;     //","隔开,前面的优先调用,当字体库中没有时再调用其它
            font-weight:bolder;
            font-style:italic;
            font-variant:small-caps;                //小写变大写
        }

文本属性
- color,direction,letter-spacing(字母间距),text-align,text-decoration

        p{
            letter-spacing:0.1cm;
            word-spacing:0.5cm;
            text-align:center;              //容器的中间
            text-decoration:underline;      //修饰,下划线
            text-transform:capitalize;      //每个单词首字母大写
            color:red;
        }

背景属性

        body{
            background-image:url(images/1.jpg); //背景图片
            background-repeat:no-repeat;            //不重复,repeat-x横向平铺
            background-position:center center;  //位置,正中
            background-attachment:scroll;       //背景滚动，fixed跟着滚动条一起移动，scroll不动
            background-color:#ffff66;           //背景颜色
        }

列表属性

        ol{
            list-style-image:url(images/1.jpg); //列表图片
            margin-left:100px;                  //图片的位置
        }

盒子模型
- padding:是内容到边的距离
  - //两个值(上下,左右)，三个值(上,左右，下),四个值(上,右，下，左【顺时针】)
- border: 是边的粗细
- margin:是控件到控件的距离

        div{
            width:100px;
            height:100px;
            border:1px solid red;
            padding:10px;
            margin:30px;        //浏览器默认body 8px
        }

定位属性position
- 1,绝对定位: 原点在父容器的左上角,向上、向右为正

        div{
            position:absolute;
            left:20px;
            top:20px;
            width:200px;
            height:200px;
            border:1px solid red;
        }

        p{
        position:absolute;
        left:20px;
        top:20px;
        }

* 2,相对定位：相对于自己原来的位置(左上角为原点)

        #d1{
            position:relative;
            left:50px;
            top:-50px;
            width:200px;
            height:200px;
            border:3px dotted red;
        }

* 顺序流:所有标签初始排列顺序为顺序流
    * 两种情况控件脱离顺序流
        * 1,把控件的位置设置为绝对定位absolute
        * 2,当设置控件的float属性时

float,z-index,overfloat属性

float属性:浮动(向左和向右)

            //两个div左右并排
            div{
                width:200px;
                height:200px;
                float:left;
            }

            #d{
                background-color:#ff99ff;
            }

            #d1{
                background-color:#00ff33;
            }

* 用clear去除float
    * clear:both;       //两边都不要float对象,但没有去掉float,还是脱离顺序流

overflow:盒子里的内容超出类范围
- overflow:auto; //浏览器自己解决,会给你自动加滚动条
- visiable; //会自动加大,一般用auto
- hidden; //隐藏
z-index属性:垂直于页面的方向看作一个层,值越大离我们越近（大的在上面,小的在下面）

鼠标的样式

hand不支持就改成pointer

        p:hover{
            cursor:pointer;
        }

滤镜(了解)

        style = "filter:wave()"

导航栏菜单制作

    <style type="text/css">
        li{
            float:left;
            margin-left:20px;
        }

        ul{
            list-style:none;
            width:900px;
            height:30px;
            background-color:black;
            padding-top:10px;
            padding-left:0px;
        }

        a{
            text-decoration:none;
            color:white;
        }
    </style>