前端：CSS基础

最新推荐文章于 2025-04-28 22:56:23 发布

原创最新推荐文章于 2025-04-28 22:56:23 发布 · 322 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

7 篇文章

订阅专栏

一、CSS 概述

CSS 指的是层叠样式表 
样式定义如何显示 HTML 元素
样式通常存储在样式表中
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

二、CSS样式的定义及调用

1、样式定义：
	(1)类定义：可以多次使用   
		要求：以点开始，后面用字母开头命名.name  
		调用：<any class="name"><any>

.box{
    width: 1200px;
    height: 70px;
}

	(2)id定义：只能用一次 
		要求：以#开头， #name 
		调用：<any id="name"></any>
	(3)标签名定义  eg:  p{}

a{
    text-decoration: none;
 }

2、样式调用方式：
//页面内样式表
	(1)行内样式  
	 范围：只在本页面中，其中行内样式范围只在这一行
	 调用方式：<any style="样式名：样式值;"></any>
	(2)页面内样式
	head中定义
	<style>
	.name{样式名：样式值;}
	</style>
	调用：<any class="样式名"></any>

//外部样式表  范围只要链接都可以起作用
(3)链接式（链接页面外的样式）
	在head中链接
	<link rel="stylesheet" href="链接的外部css文件"/>

<link rel="stylesheet" href="css/index.css"/>

(4)导入式
	<style>
        @import url(two.css);
	</style>

三、CSS样式

(1) 背景(background) 
	背景颜色：background-color:red;
	背景图片：background-img:;
	整体居中：marginal:0 auto;
	背景重复：background-repeat:no-repeat;
	是否重复：no-repeat(不重复)
		    repeat-x(水平重复)
		    repeat-y(垂直重复)
	也可用如下方法来定义背景样式，可缩减代码：
	background:背景色 背景图像 是否重复（默认为平铺） 水平位置
				竖直位置
	背景图像的链接方法：url(图片所存放的位置)
	**注意：属性与属性之间必须用空格键分割开

background:red url(../img/icon1.jpg) no-repeat right bottom;

(2)文本
首行缩进：text-indent:2em; 
	text-indent的属性会被子元素继承
文本对齐方式：text-align:对齐方式；
	对齐方式：center(居中)/left(左对齐)/right(右对齐)/
			justify(两边对齐)
字体装饰：text-decoration:none;去下划线（超链接可用）
	    text-decoration:underline;加下划线（超链接可用）
(3)字体
字体：font-family
字体大小：font-size
字体加粗：font-weight
字体风格：font-style:italic
	normal 设置字体为正常
	italic 设置字体为斜体
	oblique 设置字体为倾斜
(4)超链接的4种状态（伪对象）
	a:link    超链接访问前状态
	a:hover   鼠标悬停时的样式
	a:active  鼠标点击时的样式
	a:visited 超链接访问后的样式
	可添加属性设置不同状态下的样式	
	cursor:pinter;让鼠标变成手的形状
(5)列表
	list-style:none; 可去掉列表前的点
(6)定位
position:relative; /*相对定位*/  以他的原来位置相对发生偏移
position:absolute;/*绝对定位*/   以他的父元素发生偏移，与文档流，无关，不占据空间。
position:fixed;/*固定定位*/   

(7)浮动
float:left;
float:right;
清除浮动；clear:both/left/right;
**定位和浮动都是网页布局的方式，不能同时使用
(8)隐藏
display:none;默认隐藏（不占用空间）
	display:block;解除隐藏，显示内容
visibility:hidden;隐藏（占用空间）
(9)行高
line-height:10px;可用来调整垂直方向字的位置

四、盒子模型

宽=margin-left+margin-right+border-left+border-right+padding-left+padding-right+contenWidt
**宽=margin+border+padding+width
**高=margin+border+padding+height 
(1)边距（外边距）
	margin-left/margin-right/margin-top/margin-bottom
	margin:a   表示四边边距都相同
	margin:a b  表示上下为a，左右为b
	margin:a b c 表示上为a 左右为b 下为c 
	margin:a b c d 表示 上a  右b  下c  左d
(2)padding(内边距)  填充
padding-left/padding-right/padding-top/padding-bottom
	padding:a   表示四边填充都相同
	padding:a b  表示上下为a，左右为b
	padding:a b c 表示上为a 左右为b 下为c
	padding:a b c d 表示 上a  右b  下c  左d
(3)边框线：
	border:线型 粗细 颜色；
		线型：solid(实线)/dashed(虚线)/dotted(点状线)/
			double(双线)		
		圆角效果：border-radius:;值为50%时，边框为圆

五、块级元素和内联元素

块级元素：块元素是一个元素，占用了全部宽度，在前后都是换行符。
如：div、p、ul、li、ol、dl、dt、dd
块级元素居中：margin：0 auto;
内联元素：内联元素只需要必要的宽度，不强制换行。
如：span、strong、em、i、b、a
内联元素居中：text-align:center;
把块级元素转换为为内联元素：display:inline;
把内联元素转换为为块级元素：display:block;
一个内联元素设置为display:block是不允许有它内部的嵌套块元
**z-index:-x;代表图层的层叠   x可取1、2、3...
  vertical-align:top/bottom   顶端对齐/底端对齐

六、导航栏

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
            text-decoration: none;
        }
        body{
            background: palegreen;
        }
        div>ul{
            width: 1380px;
            height: 40px;
            background: dodgerblue;
        }
        div>ul>li{
            float: left;
            list-style: none;
            display: inline-block;
        }
        div>ul>li>a{
            width: 150px;
            line-height: 40px;
            color:white;
            text-align: center;
            margin: 0 auto;
            display: inline-block;

        }
        div>ul>li>a:hover {
            background: cornflowerblue;
        }
        div>ul>li>ul{
            background: wheat;
            list-style: none;
            display: none;
        }
        div>ul>li:hover>ul{
            display:block;
        }
        div>ul>li>ul>li{
            margin: 0 auto;
            text-align: center;
        }
        div>ul>li>ul>li:hover{
            background: black;
            color:white;
        }

    </style><!--样式-->
</head>
<body>
<div>
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="">最新资讯</a>
            <ul>
                <li><a href="">1111</a></li>
                <li><a href="">1111</a></li>
                <li><a href="">1111</a></li>
                <li><a href="">1111</a></li>
            </ul><!--二级菜单-->
        </li>
        <li><a href="">公司简介</a>
            <ul>
                <li><a href="">3333</a></li>
                <li><a href="">3333</a></li>
                <li><a href="">3333</a></li>
                <li><a href="">3333</a></li>
            </ul><!--二级菜单-->
        </li>
        <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>
        <li><a href="">联系我们</a></li>
    </ul>
</div>
</body>

导航栏及二级菜单