css 基础入门

CSS 概述

为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，css 由此而生，css 是 Cascading Style Sheets 的字母缩写，意思是层叠样式表，有了 css，html 中大部分表现样式的标签就废弃不用了，html 只负责文档的结构和内容，表现形式完全交给 css

css 基本语法

css 的定义方法是：

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式，每个属性有一个或多个值，属性和值之间以键值对的形式存在

选择器{属性:值; 属性:值; 属性:值;}

div{

    width:100px;

    height:100px;

    background:gold;

}

css 的引入方式（3种）

1）内联式

通过标签的 style 属性，在标签上直接写样式

<div style="width:100px; height:100px; background: blue;">div tag</div>

2）嵌入式

通过 style 标签，在网页上创建嵌入的样式表

<style type="text/css">

        div {width:100px; height:100px; background: blue;}

        ......

</style>

3）外链式（推荐使用）

通过 link 标签，链接外部样式文件到页面中

<link rel="stylesheet" type="text/css" href="css/main.css">

css 选择器一

1）标签选择器（常用）

标签选择器的影响范围大，一般用来做一些通用设置，或用在层级选择器中

demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style type="text/css">

    div{

        width: 100px;

        height: 100px;

        background: red;

    }

</style>

<body>

    <div>one div tag</div>

    <div>two div tag</div>

    <div>three div tag</div>

</body>

</html>

2）类选择器（常用）

通过类名称来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是 css 中应用的最多的一种选择器

demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style type="text/css">

    .box-size{

        width: 100px;

        height: 100px;

    }

    .box-color{

        background: blue;

    }

    .box-font-size{

        font-size: 20px;

    }

</style>

<body>

<div class="box-size">one div tag</div>

<div class="box-color">one div tag</div>

<div class="box-font-size">one div tag</div>

</body>

</html>

效果展示：

3）层级选择器（常用）

主要应用在标签嵌套的结构中，层级选择器，是结合上面的两种选择器来写的选择器，它可与标签选择器结合使用，减少命名，同时也可以通过层级，限制样式的作用范围

demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    .con{

        width: 200px;

        height: 100px;

        background: green;

    }

    .con span{color: red;}

    .con .pink{color: pink}

    .con .gold{color: gold;}

</style>

<body>

    <div class="con">

        <span>span tag</span>

        <a href="#", class="pink">a tag</a>

        <a href="#", class="gold">a tag</a>

    </div>

</body>

</html>

效果展示：

css 选择器二

1）组选择器（常用）

将多个选择器进行分组，如果有同样的样式设置，可以使用组选择器

demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    .box1{background: red;}

    .box2{background: pink;}

    .box3{background: gold;}

    .box1, .box2, .box3{

        width: 100px;

        height: 100px;

    }

</style>

<body>

    <div class="box1">box1</div>

    <div class="box2">box2</div>

    <div class="box3">box3</div>

</body>

</html>

2）id 选择器

通过 id 来选择元素，元素的 id 名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id 名一般给程序使用，所以不推荐使用 id 作为选择器

demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style type="text/css">

    #box{color: red;}

</style>

<body>

    <p id="box">p tag</p>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

    <p>p tag</p>  <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->

    <p>p tag</p>  <!-- 无法应用以上样式，每个标签只能有唯一的id名  -->

</body>

</html>

3）伪类选择器

常用的伪类选择器有 hover，表示鼠标悬浮在元素上时的状态

demo：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<style>

    .box1{width:100px; height:100px; background:gold;}

    .box1:hover{width:200px;height:200px;}

</style>

<body>

    <div class="box1">box1</div>

</body>

</html>

css 常用属性

布局常用样式属性：

width 设置元素(标签)的宽度，如：width:100px;
height 设置元素(标签)的高度，如：height:200px;
background 设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线

以上也可以拆分成四个边的写法，分别设置四个边的：

border-top 设置顶边边框，如：border-top:10px solid red;
border-left 设置左边边框，如：border-left:10px solid blue;
border-right 设置右边边框，如：border-right:10px solid green;
border-bottom 设置底边边框，如：border-bottom:10px solid pink;
padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;

文本常用样式属性一：

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:'微软雅黑';为了避免中文字不兼容，一般写成：font-family:'Microsoft Yahei';
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

样式中的注释

/* 设置头部的样式 */

.header{

    width:960px;

    height:80px;

    background:gold;

}

css 显示特性

display 属性是用来设置元素的类型及隐藏的，常用的属性有：

none 元素隐藏且不占位置
inline 元素以行内元素显示
block 元素以块元素显示

css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过 overflow 属性来设置

overflow 的设置项：

visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

css 权重

css 权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后面写的样式会覆盖前面写的样式

权重的等级

可以把样式的应用方式分为几个等级，按照等级来计算权重

内联样式，如：style=""，权重值为 1000
ID 选择器，如：#con，权重值为 1000
类，伪类选择器，如：.con，:hover 权重值为 10
标签选择器，如：div，p 权重值为 1

权重的计算实例

demo1：

<style type="text/css">

    div{

        color:red;

    }

</style>

......

<div style="color:blue">这是一个div元素</div>

<!--

两条样式同时作用一个div，上面的样式权重值为1，下面的行间样式的权重值为1000，

所以文字的最终颜色为blue

-->

demo2：

<style type="text/css">

    body #content .main_content h2{

        color:red;

    }

    #content .main_content h2{

        color:blue;

    }

</style>

......

<div id="content">

    <div class="main_content">

        <h2>这是一个h2标题</h2>

    </div>

</div>

<!--

第一条样式的权重计算： 1+100+10+1，结果为112；

第二条样式的权重计算： 100+10+1，结果为111；

h2标题的最终颜色为red

-->

ending ~