CSS基础

最新推荐文章于 2025-09-08 09:22:18 发布

转载最新推荐文章于 2025-09-08 09:22:18 发布 · 74 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/mexiaobai1315/blog/1609387

文章标签：

#python

2019独角兽企业重金招聘Python工程师标准>>>

CSS

设置背景

    /*背景色*/
    background-color: antiquewhite;
    
    /*背景图片*/
    background-image: url("./src/2.jpeg");
    
    /*背景重复*/
    background-repeat: no-repeat;
    
    /*背景显示的位置*/
    background-position: center;
    background-position: 100px 100px;
    
    /*设置背景的滚动模式，fixed：不跟随界面滚动*/
    background-attachment: fixed;

    /*将所有的设置放在一条语句中，没有顺序*/
    background: url("./src/2.jpeg") no-repeat red fixed;

    CSS3:
    /*设置背景大小*/
    background-size: cover;
    cover: 拉伸图片，完全覆盖背景区域
    contain: 不拉伸图片，现在最大尺寸的图片
    length:显示固定尺寸
    percentage:按照父标签百分比显示图片

    /*background-origin 属性规定 background-position 属性相对于什么位置来定位 */
    padding-box	背景图像相对于内边距框来定位.
    border-box	背景图像相对于边框盒来定位。	
    content-box	背景图像相对于内容框来定位。

    /*background-clip 属性规定背景的绘制区域。 */
    border-box	背景被裁剪到边框盒。
    padding-box	背景被裁剪到内边距框。
    content-box	背景被裁剪到内容框。

文字

    /*文本缩进*/
    /*text-indent:2em;*/
    
    /*文本对齐方式*/
    text-align: left;
    
    /*字母间距：字母与字母之间的间距，一个汉字算一个字母*/
    /*letter-spacing: 20px;*/
    
    /*字间距：字与字之间的间距，有空格分格的算一个字，比如：窗前明月光，
    如果设置字间距是没有效果的，需要将每个字之间加上空格才会有字间距的效果*/
    /*word-spacing:20px;*/

    /*字符转换：lowercase：小写、uppercase:大写、capitalize:首字符大写*/
    text-transform: uppercase;

    /*文字装饰：underline:下划线 overline:上划线 line-through:删除线* blink：文字闪烁,只有火狐支持*/
    text-decoration: blink;

    /*//空格、换行处理：
        pre:保留空格，保留换行，不允许自动换行
        pre-line:合并空格，保留换行，允许自动换行
        pre-wrap:保留空格，保留换行，允许自动换行
        normal：合并空格，忽略换行，允许自动换行
        nowrap:合并空格，忽略换行，不允许自动换行
        */
    white-space: nowrap;

    /* 设置文字方向， ltr:左到右，rtl:右到左*/
    direction: rtl;

字体

    /*设置字体，可以同时设置多种字体，系统会根据先后顺序优先选择支持的字体*/
    font-family: Gabriola;
    font-family: Gabriola ,sans-serif, Sana, Sathu;

    /*字体风格，通常情况下 italic 和 oblique表现是一样的*/
    font-style: italic; /*斜体*/
    font-style: oblique;  /*倾斜*/

    /*字体变形*/
    font-variant: small-caps; /*小型大写字母 */

    /*字体加粗,取值100-900，normal=400,bold=700,
    lighter会比标签继承的粗体更细，bolder 会比标签继承的粗体更粗 */
    font-weight: bold;

    /*设置字体大小，默认16px=1em, 1em相当于系统当前的字体尺寸*/
    font-size: 20px;

超链接

        <!--设置超链接的样式需要指定标签的伪类，伪类的设置顺序按照：
        a:hover 必须位于 a:link 和 a:visited 之后
        a:active 必须位于 a:hover 之后-->
        a:link{
            text-decoration: none;
        }
        a:visited{
            color: green;
        }
        a:hover{
            background-color: red;
        }
        a:active{
            color: gray;
        }

列表

            /*更改列表序号的类型*/
            list-style: circle;

            /*列表项图片*/
            list-style-image: url("src/2.jpeg");

            /*列表项位置*/
            list-style-position: outside;

            /*简写列表项,list-style 的值可以按任何顺序列出，
            而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。*/
            list-style: circle url("") inside;

设置标签的边框

            outline-color: green; //边框颜色
            outline-style: dashed; //边框线条类型
            outline-width: 10px; //边框宽度

边框

border-style
/*定义无边框。*/
border-style: none;
/*定义点状边框。在大多数浏览器中呈现为实线。*/
border-style: dotted;
/*定义虚线。在大多数浏览器中呈现为实线。*/
border-style: dashed;
/*定义实线。*/
border-style: solid;
/*定义双线。双线的宽度等于 border-width 的值。*/
border-style: double;
/*定义 3D 凹槽边框。其效果取决于 border-color 的值。*/
border-style: groove;
/*定义 3D 垄状边框。其效果取决于 border-color 的值。*/
border-style: ridge;
/*定义 3D inset 边框。其效果取决于 border-color 的值。*/
border-style: inset;
/*定义 3D outset 边框。其效果取决于 border-color 的值。*/
border-style: outset;

CSS3：
border-radius ：设置圆角
box-shadow
h-shadow    必需。水平阴影的位置。允许负值。
v-shadow    必需。垂直阴影的位置。允许负值。
blur    可选。模糊距离。
spread  可选。阴影的尺寸。   
color   可选。阴影的颜色。
inset   可选。将外部阴影 (outset) 改为内部阴影。

注：如果设置h-shadow、v-shadow 都为0px,则是在框四周加阴影。

CSS3 box-sizing 属性

box-sizing属性的取值：
content-box:默认值，在标签的宽度和高度之外，绘制内边距和边框；
border-box：在标签的宽度和高度之内，绘制内边距和边框；

<div class="container">
    <div class="box">div1</div>
    <div class="box">div2</div>
</div>

<style>
    .box{
        width=50%;
        float=left
    }
</style>

div container中包含两个div标签，设置div的宽度为父标签的50%，并设置float= left，两个div标签会并列显示；
如果设置了子div的border-width，div的宽度会增大，导致第二个div会被挤到第二行显示；
这种情况下需要设置box-sizing: border-box; div的内边距和边框将会在标签的宽度和高度之内绘制；

CSS3 outline

outline是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用.
outline: 2px solid black;

图片居中

vertical-align: middle;

表格

        table{
            /*设置表格的边框*/
            /*border: 1px blue solid;*/

            /*将表格边框折叠为单一边框*/
            /*border-collapse: collapse;*/
            width: 100%;
        }

        table td,th{
            border: solid red 1px;
        }

        th{
            /*设置高度*/
            height: 50px;
            /*width: 50%;*/
            background-color: green;
        }

        td{
            height: 40px;
            padding: 15px;
        }

元素居中对齐

将左和右外边距设置为 "auto"，来对齐块元素

    <div>
        this is divthis is divthis is divthis is divthis is divthis is divthis is div
    </div>
    
    <style>
        div{
            width: 70%;
            margin-left: auto;
            margin-right: auto;
        }

    </style>

使用position左右对齐

    <style>
        div{
            position: absolute;
            left: 0px;
            width: 100px;
            background-color: gray;
        }

    </style>

使用float对齐

    <style>
        div{
            float: right;
            width: 100px;
            background-color: gray;
        }

    </style>

浮动

任何标签只要设置了浮动属性，标签类型会自动变为行内-块级标签。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>this is test</title>
    <!--<link rel="stylesheet" href="test.css">-->
    <style>
        #main{
            background-color: gray;
            height: 200px;
        }

        #div1{
            background-color: red;
            float: left;
            width: 100px;
            height: 100px;
        }

        #div2{
            background-color: green;
            float: right;
            width: 100px;
            height: 100px;
        }

        #div3{
            background-color: blue;
        }

    </style>
</head>
<body>
    <div id="main">
        <div id="div1">
            this is div1
        </div>

        <div id="div2">
            this is div2
        </div>

        <div id="div3">
            this is div3
        </div>
    </div>

</body>
</html>

position

position的取值有4个：

static:默认值，正常的文本流，元素框正常生成；
relative：相对标签自己原先位置进行偏移，并且占据文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，它后面的元素是依据标签偏移之前的位置进行的定位；
absolute：使用absolute定位的元素会脱离文档流，只能根据父标签定位，而且要求父标签必须为非static方式定位。遵循子绝父相的原则。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>this is test</title>
    <!--<link rel="stylesheet" href="test.css">-->
    <style>
        #main{
            background-color: gray;
            height: 200px;
            position: relative;
        }

        #div1{
            background-color: red;
            width: 100px;
            height: 100px;

            /*相对标签自己的原先的位置向右偏移100px 向下偏移50px*/
            position: relative;
            left: 100px;
            top: 50px;
        }

        #div4{
            /*标签div4根据标签div1偏移之前的位置定位*/
            background-color: blueviolet;
            width: 100px;
            height: 100px;
        }

        #div2{
            background-color: green;
            width: 100px;
            height: 100px;

            /*绝对定位，因为div2的父标签main 设置了position: relative;
            div2会根据main标签定位*/
            position: absolute;
            right: 100px;
            bottom: 10px;

        }

        #div3{

            /*固定定位，相对视窗本身定位*/
            background-color: blue;
            position: fixed;
            bottom: 0px;
            left: 0px;
        }

    </style>
</head>
<body>
    <div id="main">
        <div id="div1">
            this is div1
        </div>


        <div id="div4">
            this is div4
        </div>

        <div id="div2">
            this is div2
        </div>
    </div>

    <div id="div3">
        this is div3
    </div>

</body>
</html>

水平居中、垂直居中

行内标签、行内块级标签：

水平居中：设置父标签的text-align：center

垂直居中：设置父标签的line-height=父标签自身高度
块级标签：

水平居中：设置标签本身margin-left: auto;margin-right: auto;

垂直居中：设置子绝父相，使用相对布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>this is test</title>
    <!--<link rel="stylesheet" href="test.css">-->
    <style>
        #main{
            background-color: green;
            width: 200px;
            height: 100px;

            position: relative;
        }

        #div1{
            background-color: red;
            width: 100px;
            height: 20px;


            margin-left: auto;
            margin-right: auto;

            position: absolute;
            left:50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

    </style>
</head>
<body>
    <div id="main">
        <div id="div1">
            this is div
        </div>
    </div>

</body>
</html>

CSS导入字体 @font-face

<style> 
@font-face
{
//自定义字体的名称，通常以字体文件命名
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
//使用字体
font-family:myFirstFont;
}
</style>

CSS 监控页面尺寸变化 @media

//监控浏览器界面宽度变为812px时，执行代码
@media screen  and (max-width: 812px){
    ...
}

可监控的参数：
width:浏览器可视宽度。
height:浏览器可视高度。
device-width:设备屏幕的宽度。
device-height:设备屏幕的高度。
orientation:检测设备目前处于横向还是纵向状态。
aspect-ratio:检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio:检测设备的宽度和高度的比例。
color:检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
color-index:检查设备颜色索引表中的颜色，他的值不能是负数。
monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
resolution:检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。
grid:检测输出的设备是网格的还是位图设备。

1.and
2.not not关键字是用来排除某种制定的媒体类型
3.only only用来定某种特定的媒体类型

常用的几种屏幕宽度设定：
@media screen and (min-width: 1200px) {
        css-code;
}
@media screen and(min-width: 960px) and (max-width: 1199px) {
        css-code;
}
@media screen and(min-width: 768px) and (max-width: 959px) {
        css-code;
}
@media screen and(min-width: 480px) and (max-width: 767px) {
        css-code;
}
@media screen and (max-width: 479px) {
        css-code;
}

转载于:https://my.oschina.net/mexiaobai1315/blog/1609387