咸鱼不咸鱼

css-选择器、常见样式、标签分类

CSS

CSS简介

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 [1]
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 [2]

1.层叠

多个样式可以作用在同一个html的标签上

2.样式表

提供了丰富的样式修饰内容

3.作用

样式丰富，功能强大
内容和样式分离(解耦)

CSS的使用

1.行内样式

在标签中使用style属性进行CSS样式设置
样式名与样式值之间用冒号隔开
样式与样式之间用分号隔开




    
    Document

2.内部样式

在标签中使用

3.外部样式

将CSS样式独立到.css的文件中
再将这个文件导入到需要使用这些样式的HTML文件中，使用标签。

（1）index.html 页面

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <link href="css/demo.css" rel="stylesheet">
head>
<body>
    <div>div>
    <div>div>
body>
html>

(2) demo.css css文件

div{
    width: 200px;
    height: 200px;
    background-color: red;
}

4.三种样式的优先级 (就近原则)

行内样式>(内部样式&外部样式)

5.三种样式的生效范围

外部样式>内部样式>行内样式

CSS选择器

1.CSS选择器

（1）为什么需要选择器

内部样式和外部样式中，需要去找到要设置样式的标签，这时就需要选择器。

（2）语法

选择器{

	样式名1:样式值1;

	……

}

2.基本选择器

（1）标签选择器

通过标签名来获取标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    style>
head>
<body>
    <div>div>
    <div>div>
body>
html>

(2) ID选择器

通过标签的ID属性的值来获取标签
注意：ID属性值在当前页面上是唯一的
使用 ‘*’

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        #test{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    style>
head>
<body>
    <div>div1div>
    <div>div2div>
    <div id="test">div3div>
    <div>div4div>
body>
html>

（3）class选择器

通过标签的class属性值来获取标签
注意：class属性值可以重复
使用 ‘.’

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        .demo{
            color: red;
        }
    style>
head>
<body>
    <div>div1div>
    <div class="demo">div2div>
    <div>div3div>
    <div>div4div>
    <p class="demo">p1p>
body>
html>

（4）三大基本选择器的优先级

ID选择器>class选择器>标签选择器

2.其他选择器

（1）全局选择器

选中当前页面上所有的标签
使用 ‘*’

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用title>
    <style>
        *{
            background-color: red;
        }
    style>
head>
<body>
    <div>这是DIVdiv>
    <div>这是DIVdiv>
    <div class="last">这是DIVdiv>
    <p>这是P标签p>
    <p class="last">这是P标签p>
body>
html>

（2）组合选择器

选中当前页面上所选中的标签
使用 ‘,’

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的选择器title>
    <style>
        #test,p,span{
            color: red;
        }
    style>
head>
<body>
    <div>这是DIVdiv>
    <div id="test">这是DIVdiv>
    <div>这是DIVdiv>
    <p>这是P标签p>
    <p>这是P标签p>
    <span>这是spanspan>
body>
html>

（3）层级选择器（后代选择器）

使用空格

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的选择器title>
    <style>
        div span{
            color: red;
        }
    style>
head>
<body>
    <div>
        <p>
            <span>这是最里面的spanspan>
        p>
        <span>这是div的儿子spanspan>
    div>
    <span>这是div的兄弟spanspan>
body>
html>

（4）子选择器

选择定位到的标签
使用 ‘>’

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的选择器title>
    <style>
        div>span{
            color: red;
        }
    style>
head>
<body>
    <div>
        <p>
            <span>这是最里面的spanspan>
        p>
        <span>这是div的儿子spanspan>
    div>
    <span>这是div的兄弟spanspan>
body>
html>

（5）属性选择器

使用：[属性名=属性值]
获取所有属性名是属性值的标签

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的选择器title>
    <style>
        [title=last]{
            color: red;
        }
    style>
head>
<body>
    <div title="first">这是DIVdiv>
    <div>这是DIVdiv>
    <div title="last">这是DIVdiv>
    <div>这是DIVdiv>
    <div title="last">这是DIVdiv>
    <p title="last">这是Pp>
body>
html>

（6）伪类选择器

主要针对超链接
a:link{}：未被访问时
a:visited{}：访问过后
a:hover{}：鼠标悬浮时（hover也可以用于其他标签）
a:active{}：鼠标激活时，点击未释放

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的选择器title>
    <style>
        a:link{
            color: black;
            text-decoration: none;
        }
        a:visited{
            color: gainsboro;
        }
        a:hover{
            color: pink;
        }
        a:active{
            color: aqua;
        }
    style>
head>
<body>
    <a href="http://www.taobao.com">淘宝a>
body>
html>

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的选择器title>
    <style>
        div:hover{
            color: pink;
        }
    style>
head>
<body>
    <div>这是DIVdiv>
body>
html>

CSS常见样式

1.尺寸样式

height：设置元素的高度
width：设置元素的宽度

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    style>
head>
<body>
    <div>这是DIVdiv>
    这是测试
body>
html>

2.字体样式

font-size：字体大小
font-style：字体风格(取值：italic/normal…)
- italic 斜体
- normal : 默认值。正常的字体
font-family：字体类型(取值：隶书/微软雅黑…)
font-weight：字体粗细取值:Normal 默认值。
- bold 粗体字符
- bolder 更粗的字符
- lighter 定义更细的字符

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用title>
    <style>
        span{
            font-size: 42px;
            font-style: italic;
            font-family: '宋体';
            font-weight: bold;
        }
    style>
head>
<body>
    <span>这是SPANspan>
body>
html>

3.字体样式

color：文本颜色（取值：colorname或#0000FF）
text-align：文本对齐（取值：left/right/center…）
text-decoration：文本装饰，取值:none默认。
- underline下划线。
- overline上划线
- line-through删除线
line-height：设置行高

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用title>
    <style>
        div{
            width: 400px;
            height: 200px;
            background-color: aquamarine;
            color: red;
            text-align: center;
            text-decoration: line-through;
            line-height: 200px;
        }
    style>
head>
<body>
    <div>
        这是DIV
    div>
body>
html>

4.边框样式

border-width：边框宽度，按方向设置：border-(left/right/top/bottom)-width
border-color：边框颜色，按方向设置：border-(left/right/top/bottom)-color
border-style：边框风格，按方向设置：border-(left/right/top/bottom)-style

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /* border: 10px black solid; */
            border-top-width: 10px;
            border-right-width: 20px;
            border-bottom-width: 30px;
            border-left-width: 40px;
            border-top-color: red;
            border-right-color: gray;
            border-bottom-color: yellow;
            border-left-color: orange;
            border-top-style: solid;
            border-right-style: double;
            border-bottom-style: dashed;
            border-left-style: dotted;
        }
    style>
head>
<body>
    <div>这是DIVdiv>
body>
html>

border-radius：圆角边框按方向设置值：border-(top/bottom)-(left/right)-radius

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            /* border-radius: 1px; */
            border-top-left-radius: 10px;
            border-top-right-radius: 20px;
            border-bottom-left-radius: 30px;
            border-bottom-right-radius: 40px;
        }
    style>
head>
<body>
    <div>div>
body>
html>

5.背景样式

background-color：yellow;背景颜色
background-image：url(img/1.jpeg);背景图片
background-repeat：背景是否平铺，
- 取值:repeat-x:水平方向平
- repeat-y :垂直方向平，
- repeat :水平和垂直方向同时平
- no - repeat : 不平铺
background-size：背景图片大小
background-position：center;背景偏移

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: red;
            background-image: url(img/gouza.png);
            background-size: 50px 50px;
            background-repeat: no-repeat;
            background-position: center;
        }
    style>
head>
<body>
    <div>div>
body>
html>

6.盒子模型

content：内容
padding：内边距
border：边框
margin：外边距

（1）内边距

padding：内容与边框之间的距离
常用样式
- padding：
- padding-top：
- padding-right：
- padding-bottom：
- padding-left：
主要作用：调整标签内容的位置，但是，会导致整个标签大小的变化

padding:10px;代表四个方向的内边距都是10个像素

padding:10px 20px;代表上下内边距是10像素，左右内边距是20像素

padding:10px 20px 30px;代表上内边距10像素，右内边距20像素，下内边距30像素，左内边距同右

padding:10px 20px 30px 40px;分别代表上，右，下，左内边距

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 10px black solid;
            /* padding: 50px; */
            /* padding: 50px 100px; */
            /* padding: 50px 100px 150px; */
            padding: 50px 100px 150px 200px;
        }
    style>
head>
<body>
    <div>
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
    div>
body>
html>

（2）外边距

margin：边框与父容器之间的距离
常用样式
- margin
- margin-top
- margin-right
- margin-bottom
- margin-left
主要作用：调整标签本身相对于父标签的位置
外边距的常用方式：设置标签水平居中
- margin: auto;

margin:10px;代表四个方向的外边距都是10个像素

margin:10px 20px;代表上下外边距是10像素，左右外边距是20像素

margin:10px 20px 30px;代表外内边距10像素，右外边距20像素，下外边距30像素，左外边距同右

margin:10px 20px 30px 40px;分别代表上，右，下，左外边距

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            border: 10px black solid;
            /* margin: 50px; */
            /* margin: 50px 100px; */
            /* margin: 50px 100px 150px; */
            /* margin: 50px 100px 150px 200px; */
             
        }
    style>
head>
<body>
    <div>
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
        这是DIV的内容这是DIV的内容这是DIV的内容这是DIV的内容
    div>
body>
html>

7.布局样式

（1）样式

float

（2）常用值

left
right

（3）理解

在Z轴上往人的方向移动，再进行左移和右移。
左移或右移时，碰到父标签边框或者碰到另一个浮动框的边框就会停下来。
实现框横向排列：将需要横向排列的框往同一个方向浮动就行了。

（4）出现问题

由于浮动脱离了原本的平面，所以原本的位置会被后面的标签挤占掉，能不能让后面的标签不去挤占呢？

（5）解决方案

清除前面浮动对后面的标签造成的影响
样式：clear
常用值：left，right，both

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用title>
    <style>
        #first{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #second{
            width: 200px;
            height: 200px;
            background-color: gray;
            float: left;
        }
        #third{
            width: 300px;
            height: 300px;
            background-color: pink;
            float: left;
        }
        #fourth{
            width: 400px;
            height: 400px;
            background-color: purple;
            float: left;
        }
        #five{
            width: 1000px;
            height: 500px;
            background-color: black;
            clear:left
        }
    style>
head>
<body>
    <div id="first">div>
    <div id="second">div>
    <div id="third">div>
    <div id="fourth">div>
    <div id="five">div>
body>
html>

8.定位样式

为了将标签放到指定的位置上。
通常情况下，能用盒子模型解决，就不要用定位。

（1）样式

position

（2）常用值

absolute：绝对定位
relative：相对定位
fixed：固定定位

（3）调整位置的样式

left
right
top
bottom

（4）绝对样式

Z轴上往人的方向移动，原本的位置会空出来，后面的标签就会去挤占掉
相对于页面的顶点进行移动

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用title>
    <style>
        #first{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #second{
            width: 200px;
            height: 200px;
            background-color: gray;
            position: absolute;
            left: 100px;
            top: 50px;
        }
        #third{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    style>
head>
<body>
    <div id="first">div>
    <div id="second">div>
    <div id="third">div>
body>
html>

（5）相对定位

原本的位置会一直保留
相对于原来的位置进行偏移

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用title>
    <style>
        #first{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #second{
            width: 200px;
            height: 200px;
            background-color: gray;
            position: relative;
            left: 0px;
            top: 0px;
        }
        #third{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    style>
head>
<body>
    <div id="first">div>
    <div id="second">div>
    <div id="third">div>
body>
html>

（6）固定定位

原来的位置不保留
相对于页面的顶点进行偏移
不受滚动条的影响

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用title>
    <style>
        #first{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        #second{
            width: 200px;
            height: 1000px;
            background-color: gray;
        }
        #third{
            width: 300px;
            height: 300px;
            background-color: pink;
        }
        #fourth{
            width: 50px;
            height: 50px;
            position: fixed;
            right: 50px;
            bottom: 50px;
        }
    style>
head>
<body>
    <div id="first">div>
    <div id="second">div>
    <div id="third">div>
    <div id="fourth">
        <a href="#" style="font-size:40px;text-decoration: none;color: black;">^a>
    div>
body>
html>

9.列表修饰

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS的使用title>
    <style>
        li{
            list-style-type: none;/*取消图标*/
            /* list-style-image: url(img/gouza.png); */
            float: left;
        }
    style>
head>
<body>
    <ul>
        <li>橘子li>
        <li>香蕉li>
        <li>火龙果li>
    ul>
body>
html>

标签的分类

1.块标签

独占一行，自动换行
可以手动设置宽高

,,,
,,,,……
2.行标签
 
   不会自动换行 
   不能设置宽高 
  
,,,,,,,,