CSS基础

来源：互联网发布：乾隆母亲知乎编辑：程序博客网时间：2024/06/18 10:09

一、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>

导航栏及二级菜单

阅读全文

0 0