CSS基础

前言：

CSS，层叠样式表，用于美化网页的。

分为：行内样式，行间样式，外部样式。

(1).行内样式：直接在元素标签中写"style="xxx:yyy;""

(2).行间样式：在<head>标签的<style></style>中写样式代码。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

View Code

(3).外部样式：把很多CSS写成一个文件，在<link>标签中的href属性里引入这个CSS文件。注意：要把这个标签写在<style>标签的外面。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <link rel="stylesheet" href="css/index.css">
</head>

View Code

(4).优先级问题

行内样式>行间样式=外部样式。（级别一样，哪个样式离这个标签最近就用那个，就近原则）

一、常见的选择器

用处：用于精准地选中元素，并赋予样式。

（一）.元素选择器。

    <style>
        /*星号*通配符，匹配所有元素*/
        * {
            margin: 0;
            padding: 0;
        }

        /*该样式，匹配所有的p标签*/
        p {
            text-align: center;
        }
    </style>

View Code

（二）.class选择器

借助了一个"类"（python中的类），一处定义，可以多处使用。

语法：".classname{}"

    <style>
        /*这是类选择器*/
        .bigbox {
            width: 100px;
            height: 100px;
        }
    </style>

View Code

（三）.id选择器

用过标签的id属性，选择对应的元素。id选择器唯一！

语法："#idname{}"

    <style>
        /*这是id选择器*/
        #banner {
            width: 100px;
            height: 100px;
        }
    </style>

View Code

（四）.群组选择器

可以同时选择多个标签的选择器。（同时选中多个，把多个选择器放在一起）

    <style>
        /*群组选择器*/
        p, span, .num {
        }
    </style>

View Code

（五）.层次选择器

(1).子代。只能选择儿子这一代。

    <style>
        /*子代*/
        /*只能选中div下一级的span。如果有嵌套，就选不了*/
        div > span {
        }
    </style>

View Code

(2).后代。儿子、孙子都能选中。

    <style>
        /*后代*/
        /*div下面，所有的span都能被选中。不管套得多深*/
        div span {
        }
    </style>

View Code

(3).兄弟。（同级别）

    <style>
        /*兄弟*/
        div ~ p {
            font-size: 12px;
            color: red;
        }
    </style>

View Code

(4).相邻。（隔壁）

    <style>
        /*相邻*/
        div + p {
            font-size: 12px;
            color: red;
        }
    </style>

View Code

（六）.属性选择器

    <style>
        /*属性选择器*/
        div[class=box] {
            width: 200px;
        }
    </style>

View Code

（七）.选择器的优先级

id>class>元素

可以把id想像成数值100，class为10，元素为1

针对选中同一个样式的情况下，有多个选择器时，不知道该如何判断优先级。把上面想像的数值加一下，数字谁大，用谁的。（不过提醒一点：10个class也没有一个id来得大）

二、字体样式

常见的属性：

（一）.font-family

    <style>
        .font_example {
            font-family: "微软雅黑", "楷体";
            /*浏览器会一个个地去找字体，如果都没有找到，则使用默认字体*/
        }
    </style>

View Code

（二）.font-size

(1).px代表像素

(2).em表示父级倍数。如：20em等价于20*父级倍数。

(3).rem是根字大小，用于移动端的。如：2rem等价于2*根字大小。

（三）.font-weight

(1).bold变粗

(2).lighter变细

(3).0-900的整数

（四）.font-indent:2em;首行缩进2个空格

（五）.text-decoration:none;去掉下划线

（六）.word-spacing:20px;词距！根据空格决定的！英文是以空格为区分一个个单词。

（七）.letter-spacing:2px;字距！

（八）.text-transform:uppercase/lower;只针对英文，全转成大写或者小写。

（九）.vertial-align:center;只能垂直对齐。

三、背景样式

先补充一点：div的高度如果设置为100%，则盒子的高度会根据内容来决定。

常用的属性：

（一）.background-color:rgba(0-255,0-255,0-255,0-1);

rgba()当中，前三个值的范围都是0-255，分别代表三原色：红绿蓝。第四个值的范围是0-1，代表透明度，0完全透明，1不透明。

（二）.background-image:url("");

（三）.background-repeat:xxx;

(1).默认是平铺，如果要这个效果，不用写这条代码。

(2).no-repeat不重复。

(3).repeat-x横坐标重复。

(4).repeat-y纵坐标重复。

（四）.background-size:xxx;

(1).填写固定的像素值，图片则等比例缩放，是宽度的值。

(2).conver是将图片等比例放大到盒子宽度的最大值，铺满，超出不显示。

(3).contain则是等比例放大到盒子的高度。

（五）.background-position:xxx;

(1).top顶部

(2).bottom底部

(3).分别指定x值和y值

（六）.复合样式

就这么写：background: url("") no-repeat center top;

四、超链接样式

针对的是<a>标签，必须按下面这样的顺序写，不然没有任何效果。

    <style>
        a:link{}
        a:visited{}
        a:hover{}
        a:active{}
    </style>

View Code

我个人推荐的记忆方式：LV HA

四个伪类单词各自的开头。LV：著名的奢侈品；HA：哈哈的拼音。合起来：LV哈

五、盒子模型

盒子模型由padding、margin、border组成。

（一）.边框：border

(1).复合样式

    <style>
        .border_example {
            border: 1px solid skyblue;
            /*边框粗细宽度，边框样式，颜色*/
        }
    </style>

View Code

如果遇到具体要设置某一边的边框，那只能分开写了。

(2).border-radius:50%;会把边框变圆了，变成一个圆。

（二）.内边距：padding

内边里面的距离，撑开、撑大，是填充，把盒子变大。内边距针对的是内容，背景不是内容。

(1).padding:30px;同时给了4个方向的内边距。

(2).padding:30px 40px;分别是：上下，左右。

(3).padding:30px 40px 50px;分别是：上，左右，下。

(4).padding:30px 40px 50px 60px;分别是：上、右、下、左。

(5).注意：值不能给负数，只能给正数，不管多大的负数都等同于0.

（三）.外边距：margin

盒子外的距离，盒子与盒子之间的距离，可以给负数。

数值的给定，同理于padding。但是，父盒子与子盒子共用一个margin-top时，需要在父盒子中写上"overflow:hidden;"

(1).小技巧

margin:0 auto;可以水平居中对齐，前提是盒子要有宽度。

(2).display属性改变元素成块级、行内、行内块

display:block;改成块级、display:inline;改成行内、display:inline-block;改成行内块。

六、reset css

浏览器在解析某些标签时，本身就自带了一些样式，导致我们写样式的时候会效果不一致。因此需要根据具体业务，来自己写一套reset.css！

这里有一个通用的reset.css可供参考：https://meyerweb.com/eric/tools/css/reset/

比较偷懒的方式如下：

    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>

View Code

七、浮动

当正常文档布局不能解决的时候，需要浮动，就是让元素脱离文档流。（行内元素给浮动后，可以给高宽了）

当一个元素脱离文档流，飘了起来后，另一个元素则趁虚而入。

语法：float:left/right;

不过浮动会产生一个问题：高度崩塌。解决方案：每次浮动后，第一时间在父盒子中清除浮动。

    <style>
        .baseboxname::after {
            content: "";
            display: block;
            clear: both;
        }
    </style>

View Code

八、定位

记住一个事儿：定位，定位，是相对什么来定位的，它的参照物是什么。

（一）.四种定位模式：

(1).static，默认。遵循文档流，写了等于没写，因为默认就是这个值。

(2).relative：相对。没有脱离文档流，以自己本身为参照物。

(3).absolute：绝对。脱离了文档流，不能清除。如果没有定义父盒子，以整个body元素为参照物；如果定位了父盒子，则以父级元素为参照物。

(4).fixed：固定。永远以body为参照物，脱离了文档流，窗口滚动，它依然不动。

补充：relative、absolute、fixed，可以给top、left、bottom、right值。

一般来说，top和left用得较多，因为bottom和right相当于给了top和left的负值。

（二）.z-index

只能给定位的元素用，数字越大，层级越高。一般会设置1-99。

posted @ 2018-04-29 15:51 root01_barry 阅读(152) 评论(0) 编辑收藏举报

刷新页面返回顶部