其他分享
首页 > 其他分享> > CSS页面布局及排版

CSS页面布局及排版

作者:互联网

一、CSS简介

CSS (Cascading Style Sheets) 层叠样式表,是一个用于修饰文档的语言,可以将文档以更优雅的形式呈现给用户。

二、CSS使用

根据定义CSS位置不同,分为行内样式、内部样式和外部样式。

1、行内样式

内联样式:直接在标签中编写样式,通过使用标签标签内部属性style。

<html标签 style="样式1:值1;样式2:值2;"></html标签>
<div class="box" style="height: 2000px; background-color: palegreen;">行内样式</div>

缺点:只能对当前标签生效,没有做到内容与样式分离,耦合度太高。

2、内部样式

定义在head标签内,通过style标签,该标签内容就是Css代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>内部样式</title>
        <style>
            div{
                color:red;
            }
        </style>
    </head>
    <body>
        <div>内部样式</div>
    </body>
</html>

3、外部样式

  1. 提前定义的CSS资源文件
  2. 在head标签内,定义link标签引入外部样式文件。
<link rel="stylesheet" href="../样式.css">

作用域范围:

外部样式表>内部样式表>行内样式表

优先级:

外部样式表<内部样式表<行内出样式表

相同的样式作用在同一个标签上:就近原则;不同的样式作用在同一个标签上:叠加。

加载外部样式表或者内部样式表时候,需要注意加载顺序:加载html文件是从上向下加载的,也就是后面加载的样式会覆盖前面的样式。

4、CSS语法

选择器{
    属性1:值1;
    属性2:值2;
    ......
}
选择器:筛选具有相似特征的元素
属性与属性值之间用冒号分开;不同属性之间使用分号隔开。
例如:
h1{
    color:red;
    font-size:12px;
}

5、CSS注释

css注释以/*开始,*/结束。

/*这是CSS的注释*/
h1{
    color:red;  /*这是颜色的注释*/
    font-size:12px;
}

三、基本选择器

1、id选择器

选择具有相同id属性值的元素,建议html页面中的id值唯一。

id选择器可以为标有特定id的html元素指定特定的样式。

html元素以id属性来设置id选择器,CSS中的id选择器以“#”来定义。

PS:id属性值不要以数字开头,数字开头的id在Firefox/Mozilia中不起作用。

虽然多个元素可以使用同一个id选择器设置样式,但是不推荐;如果需要同样的样式对多个标签起作用可以使用类选择器。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #myDiv{
            color: red;
            font-style: italic;
        }
    </style>
</head>
<body>
    <div id="myDiv">id选择器 用'#'定义</div>
</body>

2、class选择器

选择具有相同class属性值元素。

class选择器用于描述一组元素样式,class选择器有别于id选择器,可以在多个元素中使用。

class选择器在html中以class表示,在css中以一个点"."表示。

PS:class属性值不要以数字开头,数字开头的id在Firefox/Mozilia中不起作用。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .myClass{
            color: red;
        }
    </style>
</head>
<body>
    <div class="myClass">class选择器用.定义</div>
</body>

3、元素选择器/标签选择器

选择具有相同标签名称的元素。

定义选择器语法:标签名称{}

ps:标签名称必须是html提供好的标签。

使用标签选择器:自动使用在所有同名的标签上

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <div>第一段</div>
    <div>第二段</div>
</body>

4、选择器优先级

ID选择器>class选择器>标签选择器

当多个选择器作用在同一个标签上时,如果属性冲突看优先级,如果不冲突样式叠加生效。

特权:!important

权值:

5、样式表的优先级

行内样式表>内部样式表>外部样式表

三个样式表中都有同样的内容作用在同一个标签上时,如果属性冲突看优先级,如果不冲突样式叠加。

6、CSS选择器总结

核心选择器

层次选择器

伪类选择器(过滤器)

伪元素选择器

属性选择器

四、CSS常用样式

1、color:字体颜色

三种颜色值:

颜色的单词 red blue......
rgb(红,绿,蓝)三色取值范围:0-255
rgba(红,绿,蓝,透明度)透明度取值:0-1,0全透明,1不透明,0.5半透明。

#值1值2值3:值的范式:00-FF 对应关系: #FF0000->rgb(255,0,0)

2、width height:宽高

PS:只有块状元素可以设置宽高,行级元素设置宽高不生效。

取值方式两种:

  1. 数值 绝对值 单位px
  2. 百分比 占据父元素比例

3、背景样式

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    .bg{
        /*背景色*/
        background-color: cornflowerblue;
        /*背景图片:背景图片小于标签的宽高时,默认平铺*/
        background-image: url(../img/1.jpg);
        /* 背景平铺方式:不设置时候默认xy轴同时平铺
         repeat-x:横轴平铺
         repeat-y:纵轴平铺
         repeat:xy同时平铺
         no-repeat:不平铺
         * */
        background-repeat: no-repeat;
        /*背景位置:第一个单数:x轴上偏移距离,整数向右移动,负数向左移动
                     第二个单数:y轴上的偏移距离,整数向下移动,负数向上移动*/
        background-position: 10% 20px;
    }
    .bg2{
        /*将以上所有跟背景相关样式缩写
         缩写顺序:背景色、背景图片、背景图片平铺方式、背景的X轴偏移、背景的y轴偏移
         多属性之间使用空格隔开
         * */
        background: blanchedalmond url(../img/1.jpg) no-repeat 20px 30px;
    }
    </style>
</head>
<body class="bg2">
</body>

4、文本样式

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            /*块状元素都有宽高属性;行级元素没有宽高*/
            width: 90%;
            height: 400px;
            /*背景样式*/
            background: tan url(../img/1.jpg) no-repeat 10px 10px;
            /*字体*/
            font-size: 18px;
            font-family: "微软雅黑";
            font-weight: bold;
            /*字体缩写:粗细 大小 样式*/
            font: bold 24px "微软雅黑";
            /*文本样式*/
            /*划线位置:line-through 中划线   underline 下划线 none 没有划线*/
            text-decoration: underline;
            /*文本的水平对齐方式:left right center*/
            text-align: center;
            /*文本的垂直对齐方式:没有单个属性可以设置垂直对齐;
             一般单行的时候使用高度等于行高设置垂直居中;
             多行使用盒子模型*/
            line-height: 400px;
            /*文字之间的间隙*/
            letter-spacing: 10px;
        }
    </style>
</head>
<body>
    <div>
        我有一个梦想,i have a dream
    </div>
</body>

5、列表样式

<style>
    li{
        background-color: lemonchiffon;
        /*列表样式:常用取值:none-无样式 square-正方形 circle-空心圆 decimal-数字*/
        list-style-type: circle;
        /*列表样式为自定义图片*/
        list-style-image: url(../img/2.jpg);
        /*列表样式的放置位置*/
        list-style-position: inside;
        /*列表样式缩写*/
        list-style: square url(../img/2.jpg) inside;
        /*常用的列表样式*/
        list-style: none;
    }
</style>

6、边框样式

<style>
    .border{
        /*边框宽度*/
        border-width: 2px;
        /*边框颜色*/
        border-color: red;
        /*边框样式:solid 实线  dotted 点线  dashed 虚线*/
        border-style: dashed;
        /*边框样式缩写:样式 颜色 宽度*/
        border:solid green 5px;
        /*边框可以为4个方向分别设置*/
        border-top: dashed black 4px;
        border-right: dashed #FF00FF 4px;
        border-bottom: dotted darkblue 4px;
        border-left: solid fuchsia 5px;
        /*没有边框*/
        border: none;
        /*常用的细边框样式*/
        border: solid 1px #ccc;
    }
</style>

五、盒子模型

所有的html元素可以看做是盒子,在css中,"box model"是用来设计和布局时使用。

CSS盒子模型本质是一个盒子,封装周围的html元素,它包括:边框、边距、填充、实际内容。

盒子模型允许我们在其他元素和周围元素边框之间的空间放置元素。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    /* border:边框,分4个方向,同理margin、padding也分为四个方向
    * margin:元素与元素之间对的距离
    * padding:内容与边框之间的距离
    * 设置的时候顺序:上 右 下 左
    */
        .div{
            border: solid red 10px;
            /*四个方向上的元素与元素之间的距离都是50px*/
            margin: 50px;
            /*两个值的时候:第一个参数表示上下距离都是50px,第二个参数表示左右距离都是100px*/
            margin: 50px 100px;
            padding: 50px;
            /*
             一个元素真正的宽度=width+左右padding值+左右的border值
             一个元素的真正高度=height+上下的padding值+上下的border值
             * */
        }
    </style>
</head>
<body>
    <div class="div">111111111112222222222223333333333333333</div>
</body>

1、盒子的宽高

元素的实际宽度和高度:

计算一个元素在实际在页面占据的总宽度=元素宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素实际在页面占据的总高度=元素高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

2、设置宽度=元素实际宽度,box-sizing属性。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /* box-sizing:确认元素的大小
        content-box: 实际宽度=width+左右的psdding值+上下的border值
                     实际高度=height+上下的padding值+上下的border值
        border-box:实际宽度=width;实际高度=height
                    padding和border不会影响元素的实际宽高
        * */
        .box{
           width: 100px;
           height: 200px;
           border: 5px solid;
           padding: 5px;
           box-sizing: content-box;
        }
    </style>
</head>
<body>
    <div class="box">你好中国</div>
</body>

六、更多常用样式

1、float

CSS的float会使得元素向左或者向右移动,其周围的元素也会重新排列。

float往往应用于图像,但它在布局时候一样有用。

块元素脱离默认文档流,默认宽度为0,失去了对父元素支撑的能力。在浮动流中,多个同级别浮动元素在一行中显示,当这一行容纳不下,会自动换行。

1.1 元素怎样浮动

元素的左右方向浮动,意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或者向右移动,直到它的外边缘碰到包含框或者另一个浮动框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

1.2 彼此相邻的浮动元素

如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相连。

1.3 清除浮动

元素浮动之后,周围元素将重新排列,为了避免这种情况,使用clear属性清除浮动。

clear属性指定元素两侧不能出现浮动。

<head>
<meta charset="UTF-8">
<title></title>
<style>
    div{
        width: 400px;
        height: 200px;
        margin-bottom: 10px;
    }
</style>
</head>
<body>
    <!--
    没有浮动属性的元素都属于常规文档流,从上往下从左往右依次显示
    浮动的元素都脱离了常规文档流;
    为了好理解:大家可以认为浮动元素属于一层,非浮动元素属于一层
    如果想要非浮动元素不受浮动元素影响,需要使用clear属性。
    -->
    <div style="background: rgba(255,0,0,0.5);float: left;">
        div1-左浮动,脱离常规文档流,紧贴父元素或者上一个同方向浮动
    </div>
    <div style="background: lawngreen;width: 600px;height: 350px;">
        div2-未浮动,常规文档流,<br/>
        PS:此时div1在div2的上方显示,因为div1和div2是不同文档流中的元素,显示互不影响。
        如果不想让div2被浮动元素影响,需要添加clear属性。
        添加clear:left;之后div2就会忽略div1浮动的影响,在div1后面显示,不会重叠
    </div>
    <div style="background: lightblue;float: right;width: 1800px;">
        div3-右浮动,脱离常规文档流,紧贴父元素或者上一个同方向浮动
    </div>
    <div style="background: lightcoral;width: 600px;height: 350px;">
        div4-未浮动,常规文档流,<br/>
        PS:此时div3在div4的上方显示,因为div3和div4是不同文档流中的元素,显示互不影响
        如果不想让div4被浮动影响,需要添加clear属性。
        添加clear:right;之后div4就会忽略div3浮动影响,在div3后面显示,不会重叠了。
        clear属性有三个取值:left、right、both;分别是去除左浮动、右浮动和所有浮动影响。
    </div>
    <div style="background: lavender;">
        div5-未浮动,常规文档流。
    </div>
</body>

清理浮动,为容器内部添加一个子元素,一般使用伪元素较方便。

div::after {
    content:"";
    display:block;
    clear:both;
}

2、Overflow

控制内容溢出元素框时显示方式。

overflow属性有如下值:

注意:overflow属性只作用于规定高度的块元素上。

在Mac系统中,滚动条默认是隐藏的,使用的时候才显示。

3、Display和Visibility

3.1 两者之间的区别

display设置一个元素应该如何显示,visibility设置一个元素可见还是隐藏。

隐藏一个元素可以通过把display设置为“none”或者visibility设置为“hidden”。但是这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素,但隐藏的元素任然占用与未影藏之前一样的空间。该元素虽然被隐藏了但任然影响布局。

display:none也会隐藏某个元素,且隐藏的元素不会占用任何空间。该元素不仅被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。

3.2 display样式

display:block;显示为块元素

display:inline;显示为内联元素

display:inline-block 显示为内联块元素,表现为同行显示并且可以修改宽高内外边距等属性。

七、复合选择器

由两个或多个基础选择器,通过不同方式组合而成。

可以更准确更细致的选择目标元素标签。

1、全局选择器

*{} 一般去掉标签的一些默认效果时候使用,或者整站通用效果时使用。但是不推荐使用。

2、并集选择器

并集选择器是各选择器通过连接形成的,通常用于集体声明。

语法:选择器1,选择器2,...,选择器n{}

任何形式选择器都可以作为并集选择器的一部分(标签选择器、class选择器、id选择器)。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div,p,ul,li,ol,dl,dd,dt{
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div>111111111</div>
    <p>22222222</p>
    <ul><li>333333333</li></ul>
</body>

3、交集选择器

条件:交集选择器又两个选择器构成,找到的标签必须满足,既有标签一的特点,也有标签二的特点。

语法:h3.class{color:red}

其中第一个选择器为标签选择器,第二个为类选择器。两个选择器之间不能有空格。

交集选择器是并且的意思,即...又...的意思。

4、后代选择器

概念:后代选择器又称为包含选择器。

作用:用来选择元素或者元素组的子孙后代。

将外层元素写在外面,内层元素写在后面,中间用空格分开。爷爷,父亲,儿子,孙子...

格式:父亲 儿子{属性:属性值;属性:属性值} 例如:.class h3{color:red;font-size:16px}

当标签发生嵌套时,内层标签就成为外层标签的后代。

5、子元素选择器

作用:子元素选择器只能选择作为某个元素子元素(亲儿子)的元素。

写法:父元素写在前面,子元素写在后面,中间用>连接。

例如:.class>h3{color:red;font-size:16px}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>复合选择器</title>
        <style>
        /*全局选择器:一般去表标签的一些默认效果时候使用,或者整站通用效果时候使用。但是不推荐这么设置。
         */    
         *{
             color: #333;
         }
         /*并集选择器:通常用户集体声明
          * 替换全局选择器
          */
         div,p,dl,dt,dd{
             margin: 0px;
             padding: 0px;
             color: #333;
         }
         /*交集选择器*/
        li.myli{
            color: green;
        }
        /*后代选择器*/
        ul li{
            font-size: 28px;
        }
        .myUL li{
            font-family: "微软雅黑";
        }
        .myUL li a{
            text-decoration: line-through;
        }
        /*子元素选择器*/
        .demo>h3{
            color: blue;
        }
        </style>
    </head>
    <body>
        <ul>
            <li>1111111111111111111</li>
            <li class="myli">2222222222222222222</li>
            <li>3333333333333333333</li>
            <li>4444444444444444444<a href="#">click me</a></li>
            <li class="myUL">
                        <ul>
                        <li>li1111111111111111</li>
                        <li class="myli">li2222222222222222</li>
                        <li>li3333333333333333</li>
                        <li>li4444444444444444<a href="#">click me</a></li>
                        </ul>
            </li>
        </ul>
        <ol>
            <li>111111111111111111</li>
            <li>222222222222222222</li>
            <li>333333333333333333</li>
            <li>444444444444444444</li>
        </ol>
        <div class="demo">
            <h3>静夜思</h3>
            <ul>
                        <li><h3>床前明月光</h3></li>
            </ul>
        </div>
    </body>
</html>
 

6、伪类选择器

和类选择器相比,类选择器使用.class{},伪类选择器使用:link{}

作用:用于向某些选择器天长假特殊效果。比如向链接添加特殊效果。

伪类选择器很多:链接伪类、结构伪类等。

链接伪类:

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*伪类选择器*/
        a:link{
            color: red;/*默认样式*/
        }
        a:visited{
            color: blue;/*访问过的样式*/
        }
        a:hover{
            color: green;/*鼠标悬浮的样式*/
            font-size: 28px;
        }
        a:active{
            color: gold;/*按下鼠标不放手样式*/
            font-family: "微软雅黑";
        }
    </style>
</head>
<body>
    <a href="1.html" target="_blank">1.html</a>
    <a href="2.html" target="_blank">3.html</a>
    <a href="3.html" target="_blank">3.html</a>
</body>

注意:

  1. 链接伪类写的时候顺序不要颠倒,按照lvha顺序,否则可能引起错误。
  2. 因为是链接伪类,所以都是使用交集选择器a:link a:hover
  3. 因为a链接浏览器有默认样式,所以实际工作中需要给a链接单独指定样式。
  4. 实际开发中很少四个属性都用到,常用写法如下:

7、复合选择器比对

 八、页面布局

1、relative(相对定位)

.box {
    position: relative;
    left: 100px;
    top: 200px;
}

2、absolute(绝对定位)

.box{
    position: relative;
}
.box > .box1 {
    position: absolute;
    left: 0;
    top: 0;
}

3、fixed(固定定位)

.box{
    position: relative;
}
.box > .box1 {
    position: fixed;
    left: 50%;
    margin-left: -150px;
}

4、伸缩盒布局(flex)

作用:与浮动布局类似,用于将一个容器中多个子元素【块元素】在一行中多列排列。常用于响应式布局(移动端)

概念:

  1. 子元素都是沿着主轴来排列的,主轴由flex-direction定义,row-x;column-y
  2. 一般建议给容器添加宽高,子元素在容器中排列
ul{
    display:flex;                     
    flex-direction: row;             
    flex-wrap: wrap;                
    justify-content: space-around;
}
ul > li{
    flex:1;
}

 

转自https://blog.csdn.net/lj15559275886/article/details/116353756

 

标签:样式,标签,border,元素,color,排版,选择器,CSS,页面
来源: https://www.cnblogs.com/hhaostudy/p/16324563.html