css(1)

CSS

一、概述

1、简介

　　css全称是Cascading Sheets ，层叠样式表，级联样式表，简称样式表。

2、作用

　　设置HTML网页中的元素样式。

3、CSS和HTML的关系

　　HTML：负责网页结构的搭建，内容的展示；

　　CSS：负责网页的修饰；

4、CSS与HTML的属性使用原则

　　w3c建议我们尽量使用css的方式来取代html的属性

　　css样式：

　　　　1）样式代码高度的重用；

　　　　2）提高可维护性；

二、语法规范　　

1、使用CSS的方法　　

1.1  内联样式

将CSS的样式定义在HTML标签的style属性中
<any style="样式声明"></any>
样式声明   样式属性：值  组成
多个样式声明之间用分号分隔

注意：
　　1、内联样式使用的非常少（禁止使用）；
　　2、样式冲突的时候内联样式优先级最高；
　　3、内联样式不能重用；
　　4、项目中一般很少用，只在学习和测试时用；


【例子】

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <p style="color:red;font-size:10px">小白兔</p>
    <p style="color:pink;font-size:20px">白又白</p>
    <p style="color:blue;">两只耳朵竖起来</p>
    <p style="color:red;background:blue">爱吃萝卜和青菜</p>
</body>
</html>

【常用的CSS属性】

color:设置文本的颜色

取值：合法的颜色值（颜色的英文，#a~f*3 #abc）

font-size:设置字体大小

background:设置背景颜色

1.2 内部样式

    在<head></head>标签中，添加<style></style>标签，在其内部定义样式规则
    <style>
        样式规则
    </style>

     样式规则：由选择器和样式声明组成

注意：

　　1、内部样式在本页面可以重用，但是其他页面不能重用；

　　2、项目中使用不多，但是学习和测试中大量使用；



【例子】

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        p{
            color: #aaf;
            background: #faf;
        }
    </style>
</head>
<body>
    <p>小白兔</p>
    <p>白又白</p>
    <p>两只耳朵竖起来</p>
    <p>爱吃萝卜和青菜</p>
</body>
</html>

1.3 外部样式


可在任何网页中引用

<head>
　　<link rel="stylesheet" hred="css文件的url">
</head>

外部样式是项目中必须使用的样式写法


【1120.css】

p{
    color:pink;
    background: #ff0;
    font-size: 50px;
}

【1120.html】

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="1120.css">

</head>
<body>
    <p>小白兔</p>
    <p>白又白</p>
    <p>两只耳朵竖起来</p>
    <p>爱吃萝卜和青菜</p>
</body>
</html>

【1121.html】

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="1120.css">

</head>
<body>
    <p>小白兔</p>
</body>
</html>

2、css样式的特性

　　1）继承性（子标签继承父标签）

　　　　大部分的CSS效果是可以直接被子元素继承的

　　　　必须是层级结构

　　2）层叠性

　　　　可以为一个元素定义多个样式规则

　　　　规则中属性不冲突（不重复），可以同时作用当当前元素上

　　3）优先级

　　　　如果样式声明冲突时，按照样式规则优先级应用；

　　　　默认的优先级，从高到低：

　　　　　　1、内联样式（行内样式）优先级最高；

　　　　　　2、内部样式、外部样式, 遵循就近原则；

　　　　　　3、浏览器默认样式最低；

　　　　　　4、调整优先级

　　　　　　　　!important规则------放在属性值后，与值之间用空格隔开，作用是调整优先级，让没有important属性不能覆盖他；

3、选择器

【基础选择器】

　　1）选择器的作用

　　　　规范了页面中哪些元素能够使用定义好的样式

　　　　为了匹配元素

　　2）基础选择器的详解

　　　　1> 通用选择器

　　　　　　*{样式} *{color: #faf}

　　　　　　*效率极低，尽量少用

　　　　　　*{margin:0;padding:0}　

【元素选择器（标签选择器）】　　

　　设置页面中一类元素的默认样式

　　语法：标签名称{样式申明}　　

　　　　　　color: red;
　　　　　}

【类选择器】

　　定义页面上某类元素的公共样式，谁想要用，就引用我的class名

　　元素通过class属性来引用该样式

　　语法：.类名{样式申明} 注意：“.”不可以省略类名不能以数字开头，不可以包含特殊字符(可以有-_)

　　<any class="类名">

【例子】：

<style type="text/css">
    .font_blue{color: blue;}
</style>


<body>
    <p class="font_blue">土豆丝</p>
</body>

　　类选择器的特殊用法：

1、多类选择器(一个元素引用多个类选择器)，中间用空格分开

<style type="text/css">
        .font_blue{color: blue;}
        .font_size{font-size: 30px;}
</style>


<body>
    <p class="font_blue font_size">土豆丝</p>
</body>

2、分类选择器（将元素选择器和类型选择器联合使用）
　　
　 语法：元素选择器.类选择器{}
　 可以匹配到，指向了某个类的具体的某个元素

<style type="text/css">
        span.font_pink{color: pink;}
</style>

<body>
    <span class="font_pink">hello</span>
</body>

作用：
　　1、指向更精确
　　2、优先级变高

3、id选择器（设置指定元素的样式，专属定制）

<style type="text/css">
        #d1{color: yellow;}
</style>

<body>
    <div id="d1">盐水鸭</div>
</body>

4、群组选择器（将多个选择器放在一起，一块定义某公共样式）
语法：选择器1，选择器2，选择器3......
#d1,#d2,span,*{color: blue},.font_size{font-size: 50px;}


5、后代选择器（通过元素的后代关系匹配元素，后代指的是一层或多层的嵌套关系）

语法：选择器1 选择器2 选择器3{样式申明}

去掉a标签的下划线：text-decoration:none

<style type="text/css">
    div span{color: red;}
</style>


<body>
    <div>
        <span>hello</span>
    </div>
</body>

6、子代选择器(通过元素的子代关系匹配元素【一层嵌套】)

选择器1>选择器2>选择器3{样式申明}

子代和后代可以混用

<style type="text/css">
    div>span{color: yellow;}
</style>


<body>
    <div><span>hello</span></div>
</body>

7、伪类选择器（匹配元素的不同状态下样式）

1）链接伪类

　　:link  元素尚未访问时的状态样式
　　:visited   元素访问过后的状态样式

【例子】

<style type="text/css">
    #a1:link{color: red;}
    #a1:visited{color: yellow;}
</style>


<body>
    <a id="a1" href="http://www.baidu.com">百度</a>
</body>


2）动态伪类

:active  匹配元素被激活时的状态 鼠标点击的一瞬间

<style type="text/css">
    #a1:active{color: pink;}
</style>

<body>
    <a id="a1" href="http://www.baidu.com">百度</a>
</body>

　　:focus 匹配元素获取焦点时的状态

<style type="text/css">
    #cs:focus{background:yellow;}
</style>

<body>
    <input id="cs" type="button" name="你会">
</body>

　　 :hover 鼠标悬停在元素时的状态

<style type="text/css">
    .img:hover{width: 200px;}
</style>


<body>
    <img class="img" src="C:/Users/Desktop/739.png" alt="">
</body>

8、选择器的权值

　　权值：标识当前选择器的重要程度，权值越大优先级越高；

　　!important  >  1000

　　内联样式     = 1000

　　id选择器     = 100

　　类和伪类选择器    10

　　元素选择器     1

　　*选择器       0

　　继承的样式无权值       无

4、边框尺寸

1）尺寸属性（改变元素的宽高）

　　width

　　最大宽度 max-width

　　最小宽度 min-width

　　height

　　最大高度　　max-height

　　最小高度 min-height

<head>
    <title></title>
    <style type="text/css">
        .d1{
            background: pink;
            width: 200px;
            height: 200px;
            max-width: 300px;
            min-width: 200px;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
</body>

总结：页面中可以设置尺寸的元素

　　1、所有的块级元素都允许设置尺寸

　　2、所有的行内块元素都允许设置表单元素（除了单选按钮和复选框）

　　3、本身具备width height 属性的元素

　　大部分行内元素不允许修改尺寸

2、颜色单位

　　1、颜色的英文单词

　　2、#rrggbb

　　3、#aabbcc

　　4、rgba(r,g,b,alpha) alpha 透明度

一、尺寸和边框

　　1、尺寸属性

　　2、溢出处理

　　　　当内容多，元素区域小的时候，就会产生溢出效果，默认是纵向溢出

　　　　overflow overflow-x overflow-y

　　　　取值：

　　　　visible 可见的默认值溢出可见

　　　　hidden 隐藏的溢出的内容不可见

　　　　scroll 显示滚动条，不管是否溢出，都添加横向和纵向滚动条

　　　　auto 溢出的部分，显示滚动条，并可用

　　3、边框属性

　　　　border:width style color border-top border-right boder-bottom boder-left

　　　　边框的宽度

　　　　style:边框的样式

　　　　　　取值 solid 实线

　　　　　　　　　　 dotted 虚线（点点）

　　　　　　　　　　 dashed 虚线（短线）

　　　　　　　　　　 double 双实线

　　　　　color:边框的颜色，合法的颜色值（transparent 透明色）

　　　　　这种写法，同时设置4个边框，是一种简写方式

　　　　　取消边框 border:none/0;

　　　　单属性设置：

　　　　border-color:#f00;

　　　　border-style:dotted;

　　　　border-10px;

　　　　单边单属性：

　　　　border-方向-属性（12个）

　　　　border-top-style:double;

　　　　border-top-color:#44f;

　　　　【例子】向下的三角箭头

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .d1{
            width: 0;
            height: 0;
            border: 30px solid transparent;
            border-top-color: #aaa;

    </style>
</head>
<body>
    <div class="d1"></div>
</body>
</html>