CSS3教程3——美化网页元素

3、 美化网页元素

3.1、为什么要美化网页

1. 有效地传递页面信息

2. 美化网页，页面漂亮，才能吸引用户

3. 凸显页面地主题

4. 提高用户的体验

 

span标签 没什么意义，但是习惯把一些重点要突出的字，用span标签套起来，再加上class或者id进行样式设置

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

类似的是div标签，看起来没什么用，套一下id和class来进行样式设置

3.2、字体样式

font-family: 字体;
font-size: 字体大小;
font-weight: 字体粗细;
color : 字体颜色;

3.3、文本样式

1. 颜色 color 单词、RGB值、RGBA（A的值0-1）

2. 对齐方式 text-align : center ,left ,right

3. 缩进 text-indent : 2em

4. 行高 line-height 行的上下的高度 * 行高和块的高度一致，就可以使行上下居中

5. 装饰（下划线）text-decoration: underline(下划线) linethrough(删除线) overline(上划线) none(去下划线)

6. 文本图片水平对齐 选择器选择文本和图片，然后对齐 vertical-align: middle

3.4、超链接伪类

:hover 鼠标悬浮   一般只用这一个，写a标签时，最好附带写上这个
:active 鼠标点击时

3.5、阴影

text-shadow: 颜色 偏移x 偏移y 模糊

3.6、列表样式

/*
list-style:
    none 去点原点
    circle 空心圆
    decimal 数字
    square 正方形
*/
ul{
    background: black;
}
​
ul li{
    height:30px;
    list-style: decimal;(none等)
    text-indent:1em;
}

这里的空格是由于盒子模型导致的。

上面导航栏不想那么大，可以使用<div id="nav">标签标起来，然后进行模式设置，而一般不使用<nav>标签。

此外，CSS代码建议有一定的顺序，方便检查。

3.7、背景

背景颜色

背景图片

    <style>
        div{
            width:1000px;
            height: 700px;
            border: 1px solid red;
            background-image: url("images/4.png");
            /*默认全部平铺*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
        title{
            /*合在一起写背景 颜色，图片，图片位置 是否重复 */
            background: red url("") 270px 10px no-repeat;
    
        }
​
​
    </style>

3.8、渐变

参考链接：https://www.grabient.com/

background-color: #4158D0;
background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);

3.9、盒子模型

外边距、边框、内边距

3.9.1、边框

1. 边框粗细

2. 边框样式

3. 边框颜色

    <style>
        /*body总有默认的外边距8px*/
        /*初始化时，一般将一些默认值设置为0*/
        h1,h2,ul,li,a,body{
            margin: 0;
            border: 0;
            padding: 0;
            text-decoration: none;
        }
        /*border 粗细，样式，颜色*/
        #app{
            width:300px;
            border: 1px solid red;
        }
        h2{
            font-size: 16px;
            background-color: aquamarine;
            line-height: ;
        }
        form{
            background-color: #00ff40;
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px dashed black;
        }
        div:nth-of-type(3) input{
            border: 2px dashed #008c27;
        }
    </style>

3.9.2、外边距，内边距

重要作用：居中元素

margin:0 auto;
padding:10px 2px

3.9.3、如何计算盒子模型

盒子的计算方式：你这个元素到底多大

元素的最终大小=margin+border+padding+内容宽度

3.9.4、关于盒子模型的一些理解

解决几个问题：

1. 如果没有设置一个元素的宽度，从哪里得到它的宽度？

   一个块元素的默认宽度是“auto”，说明它会延伸占满可用空间。可用空间指的是内容空间，即盒子模型的内容部分

2. 如果没有指定元素的高度？

   一般来说，一个元素的高度是默认的，也就是auto，在垂直方向上会延伸内容区，使所有内容可见。

   可以显式地设置一个高度，不过会有风险，如果指定地高度不够大，无法放下内容，会“溢出”到其他元素中。

   因此，一般不用指定元素的高度，让它们默认为auto。

3.10、圆角边框

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid black;
            border-radius: 100px;
        }
    </style>

 

3.11、阴影

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid black;
            box-shadow:10px 10px 100px yellow;
        }
    </style>

3.12、设计前端

将想模仿的网页保存到本地，然后拿到html源代码去修改