CSS基础与页面美化

最新推荐文章于 2024-09-11 20:31:47 发布

VvUPUP

最新推荐文章于 2024-09-11 20:31:47 发布

阅读量199

点赞数 1

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/vv0606/article/details/109201681

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、CSS简介

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示控制 HTML 元素,从⽽实现美化HTML⽹⻚。

样式通常存储在样式表中，⽬的也是为了解决内容与表现分离的问题。

样式层叠次序

⼀般⽽⾔，所有的样式会根据下⾯的规则层叠于⼀个新的虚拟样式表中，其中数字 4 拥有最⾼的优先权。

1. 浏览器缺省设置（默认的）

2. 外部样式表（使用link引入）

3. 内部样式表（style内部）

4. 内联样式（在 HTML 元素内部）

二、CSS基础语法和使用方式

1、css语法

格式：选择器{属性:值;属性:值;属性:值;....}

p{
 color:red;
 text-align:center;
}

2、注释

格式： /* ... */

3、如何插⼊样式表

内联⽅式 (直接在html标签后面定义)

<p style="color:blue;font-family:⾪书">在HTML中如何使⽤css样式</p>

特点：仅作⽤于本标签

内部⽅式（在当前页面在head标签中使⽤标签来设置css样式）

<style type = "text/css" > ... .css 样式代码 </style>

特点：作⽤于当前整个⻚⾯

外部导⼊⽅式（在head标签中使⽤标签导⼊⼀个css⽂件，在作⽤于本⻚⾯，实现css样式设置）

<link href = " ⽂件名 .css" type = "text/css" rel = "stylesheet" />

特点：作⽤于当前整个⽹站

三、常用选择器

1、html选择器

就是把html标签作为选择符使⽤

p{....} ⽹⻚中所有p标签采⽤此样式

h2{....} ⽹⻚中所有h2标签采⽤此样式

2、class类选择器

使⽤ . 将⾃定义名（类名）来定义的选择符

<html 标签 class=" 类名 ">...</html 标签> (class="类名1 类名2" 同时代表两个类名)

.mc{color:blue;} /* 凡是 class 属性值为 mc 的都采⽤此样式 */

p.ps{color:green;} /* 只有 p 标签中 class 属性值为 ps 的才采⽤此样式 */

注意：类选择符可以在⽹⻚中重复使⽤(多个class可以使用同一个类名)

3、id选择器。

和class选择器类似

<html 标签 id="id 名 ">...</html 标签 >

#id 名 { 样式 .....}

注意：id选择符只在⽹⻚中使⽤⼀次.

选择符的优先级从⼤到⼩：[ID 选择符 ] > [class 选择符 ] > [html 选择符 ] > [html 属性 ]

4、关联选择器

指定关系下的选择器

table a{....} /*table标签⾥的a标签才采⽤此样式*/

h1 p{color:red} /*只有h1标签中的p标签才采⽤此样式*/

div>p{...} 选择所有作为div元素得到直接子标签p

div+p 选择紧贴在div元素之后的一个p元素

div~p 选择div元素后⾯的所有兄弟元素p

5、选择器组

几个选择器都能用

h3,h4,h5{color:green;} /*h3、h4和h5都采⽤此样式*/

6、伪类选(伪元素)择器

a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */

a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */

a:hover {color: #FF00FF; text-decoration: underline} /* ⿏标在链接上 */

a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */、

h1:hover{...} 设置元素在其⿏标悬停时的样式

h1:focus{...} 设置元素在其获取焦点时的样式

四、CSS常用属性

1、颜色

可以使用颜色名或者rgb(x,x,x)或者#rrggbb 来定义颜色

RGB 颜⾊ : 红 (R) 、绿 (G) 、蓝 (B)三个颜⾊通道的变化 rba(255,0,0) 或者改成16进制：#ffff0000

设置图片的透明度： img.opacity{ opacity:0.25;}

2、字体

font-size：字体⼤⼩：20px，60%基于⽗对象的百分⽐取值

font-family ：字体：宋体，Arial

font-weight：字体加粗：bold

3、文本属性

text-align: ⽂本的位置：left center right

text-decoration：字体画线：none⽆、underline下画线，line-through贯穿线

text-shadow: ⽂本的⽂字是否有阴影及模糊效果

letter-spacing: ⽂字或字⺟的间距

line-height：⾏⾼

4、背景

background-color: 背景颜⾊

background-image: 背景图⽚ -> url("图片地址")

background-repeat：重复(平铺):repeat 不重复：no-repeat

background-position：定位（比如想把一个图片放在div的右下角，就可以写成：bottom right）

这里定位也有点像数学上的坐标系，只是它的y轴正方向是向下的，原点在div左上角

可以设置具体移动的像素：x px y px

background-attachment：是否固定背景，

scroll: 默认值。背景图像是随对象内容滚动

fixed: 背景图像固定

抠图：

还可以使用这种方式来达到，鼠标移到一个图标上显示另一个图标的效果，就是鼠标当移到小狗上面的时候，再把定位移到右边那个彩色的小狗上，就可以实现

5、边框属性

border:宽度样式颜⾊;。

border-color;

border-style; 边框样式：solid实现，dotted点状线，dashed虚线

border-width:

border-left-color;

border-left-style;

border-left-width:

border-radius：圆⻆处理（50%就可以变成一个圆）

box-shadow: 设置或检索对象阴影

6、补白

内补白：

padding：检索或设置对象四边的内部边距,如padding:10px;

padding-top ：检索或设置对象顶边的内部边距

padding-right ：检索或设置对象右边的内部边距

padding-bottom ：检索或设置对象下边的内部边距

padding-left ：检索或设置对象左边的内部边距

外补白：

margin：检索或设置对象四边的外延边距,如 margin:10px;

margin:5px auto; 上下5px，左右居中

margin-top ：检索或设置对象顶边的外延边距

margin-right ：检索或设置对象右边的外延边距。

margin-bottom ：检索或设置对象下边的外延边距

margin-left ：检索或设置对象左边的外延边距

外补白的时候，两个div之间的补白距离不会叠加，会选择最大的那个。但是如果设置了浮动，就会叠加。

注意：div的设置的宽度是内容宽度，不包括内外补白。如果设置了box-sizing:border-box，就可以包含补白了。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*公共样式的设置*/
        h4,body,ul,li,a{padding:0px;margin:0px;}
        ul{list-style: none;} /*废除无序列表符号*/
        a{color:#222;text-decoration:none;}
        a:hover{color:#f00;text-decoration:underline;}

        /*盒子模型的样式*/
        .box{
            width:260px;
            margin:50px;
            border: 1px solid #ddfab8;
        }
        .box .header{
            width:100%;
            height:26px;
            background-image: url(./images/spph_bg.gif);
        }
        .box .header h4{
            font-size:14px;
            height:26px;
            line-height:26px;
            color:green;
            padding-left:8px;
        }

        .box .content{
            padding:5px;
        }

        .box .content ul li.tag{
            height:23px;
            line-height:23px;
            padding-left:30px;
            background:url(./images/spph_ico.gif) no-repeat;
        }

        .box .content ul li.t1{background-position: 8px 6px;}
        .box .content ul li.t2{background-position: 8px -19px;}
        .box .content ul li.t3{background-position: 8px -43px;}
        .box .content ul li.t4{background-position: 8px -67px;}
        .box .content ul li.t5{background-position: 8px -90px;}
        .box .content ul li.t6{background-position: 8px -113px;}
        .box .content ul li.t7{background-position: 8px -137px;}
        .box .content ul li.t8{background-position: 8px -162px;}
        .box .content ul li.t9{background-position: 8px -185px;}
        .box .content ul li.t10{background-position: 8px -209px;}

        .box .content ul li a{font-size:13px;}
    </style>
</head>
<body>

    <div class="box">
        <div class="header">
            <h4>商品排行</h4>
        </div>
        <div class="content">
            <ul>
                <li class="tag t1"><a href="#">6月周年庆促销活动正式开始啦！</a></li>
                <li class="tag t2"><a href="#">享不尽的百货盛宴！快来体验吧！</a></li>
                <li class="tag t3"><a href="#">红六月手机家电会员回馈专场</a></li>
                <li class="tag t4"><a href="#">收纳用品春季热销 方便实用</a></li>
                <li class="tag t5"><a href="#">时尚挂表低折扣 精细准确</a></li>
                <li class="tag t6"><a href="#">24小限时达，超时即免单</a></li>
                <li class="tag t7"><a href="#">注意啦，24小时限时达活动细</a></li>
                <li class="tag t8"><a href="#">2010年度家电风云榜评选结果揭晓</a></li>
                <li class="tag t9"><a href="#">享不尽的百货盛宴！快来体验吧！</a></li>
                <li class="tag t10"><a href="#">上海市企业客户参加以旧换新调整</a></li>
            </ul>
        </div>
    </div>
    
    
</body>
</html>

案例：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0px;padding: 0px;}
        ul{list-style: none;}

        #nav{
            height:50px;
            background:url(./images/repeat.png);
        }
        #nav ul li{
            width:140px;
            float:left;
        }
        #nav ul li a{
            display:block;
            width:140px;
            height:50px;
            line-height: 50px;
            text-decoration:none;
            font-size:18px;
            font-weight: bold;
            color:white;
            text-align:center;
        }
        #nav ul li a:hover{
            background-color: white;
            color: blue;
        }
    </style>
</head>
<body>
    <h1>CSS案例：导航栏的实现</h1>
    <div id="nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">商品展示</a></li>
            <li><a href="#">新闻列表</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">在线帮助</a></li>
        </ul>
    </div>
</body>
</html>

VvUPUP

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础与页面美化

一、CSS简介CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示控制 HTML 元素,从⽽实现美化HTML⽹⻚。样式通常存储在样式表中，⽬的也是为了解决内容与表现分离的问题。样式层叠次序⼀般⽽⾔，所有的样式会根据下⾯的规则层叠于⼀个新的虚拟样式表中，其中数字 4 拥有最⾼的优先权。1. 浏览器缺省设置（默认的）2. 外部样式表（使用link引入）3. 内部样式表（style内部）4. 内联样式（在 HTML 元素内部）二、CS
复制链接

扫一扫

专栏目录