CSS学习笔记

最新推荐文章于 2022-07-08 15:23:15 发布

Z1990202

最新推荐文章于 2022-07-08 15:23:15 发布

阅读量375

点赞数

分类专栏：笔记文章标签： css html

本文链接：https://blog.csdn.net/Z1990202/article/details/114433532

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的基础知识，包括CSS的使用、语法、四种应用方式（行内、内部、外部、导入）、选择器的类型（通配符、标签、类、ID、派生选择器等）以及伪类和伪元素的用法。还涵盖了CSS中的字体样式、背景设置、浮动布局、清除浮动的方法，以及盒子模型和列表样式的相关属性。此外，还讨论了表格和轮播图的CSS实现。

摘要由CSDN通过智能技术生成

一.CSS基础

1.CSS介绍

1.1 CSS的使用

CSS:层叠样式表，用来美化网页，使用CSS可以让结构(HTML)与表现（CSS）分离，方便维护。

1.2 基本语法

选择器{

属性：属性值;

}

选择器：通常是要改变的HTML标签

每条声明由一个属性（property）和一个属性值（value）组成。

属性（property）是希望设置的样式属性（style attribute）。

每个属性有一个属性值（value）。属性和属性值被冒号分开

1.3 CSS 的四种应用方式

1.行嵌样式（行间样式）

<div style="color:olive;width:150px;border:1px solid blue;">行间样式测试1</div>

2.内部样式表

<style type="text/css">
    p{
        background-color: darkseagreen;
        font-size: 18px;
        font-style: italic;
    }
</style>

3.链入外部样式表

先创建style.css文件

<link rel="stylesheet" href="style.css">

4.导入外部样式表

先创建test.css

<style type="text/css">
    @import "css/test.css";
</style>

上述四种区别：

行间样式只作用于当前标签，内部样式作用于当前文件，外部样式可以被多个HTML文件引用，实际开发多用外部import和link引入。

import和link的区别 :

1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

4.link支持使用Javascript控制DOM去改变样式；而@import不支持。

1.4 CSS选择器

通配符选择器匹配HTML中的所有元素。

1）*:匹配HTML中的所有元素(注意： * 性能比较差，需要匹配所有标签，所以在开发时候，不建议使用)

2）标签选择器：用来匹配

3）类选择器：用来选择class命名的标签

4）ID选择器：用来选择用id命名的标签

5）派出选择器：根据上下文确定选择器的标签

6）伪类选择器

7)伪元素选择器

1.5 选择器的分组

让多个选择器（元素）具有相同的样式，一般用于设置公共样式。

1.6 选择器的继承

CSS继承是指被包在内部的标签拥有外部标签的样式性质。CSS的一个主要特征就是继承，它依赖于祖先-后代关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以用于它的后代。

1.7 优先级

多重样式：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。一般情况下，优先级如下：（外部样式）<（内部样式）<（内联样式）。

优先权值：我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。

!important，加在样式属性值后，权重值为 10000。
内联样式，如：style=””，权重值为1000。
ID选择器，如：#content，权重值为100。
类、伪类、伪元素，如：.content、:hover 权重值为10。
标签选择器，如：div、p 权重值为1。

2.CSS字体

2.1.font-size:设置字体大小

属性值：

- number+px:固定值尺寸像素
- number+%:其百分比取值是基于对象中字体的尺寸大小

2.2.font-family:设置字体

属性值:

- name:字体名称按优先顺序排列,以逗号隔开。如果字体名称包含空格，则应使用引号括起。
- p { font-family: Courier, "Courier New", monospace; }

2.3.font-style：设置文字样式

属性值：

- normal:默认值，正常字体
- italic:斜体，对没有斜体变量的特殊字体，应该使用oblique
- oblique:斜体

2.4.font-weight：加粗

属性值：

- normal:正常
- bold:粗体
- bolder:比bold粗
- lighter:比normal细
- {100-900}：定义粗到细的字符，400等同于normal,700等同于bold

2.5.line-height：行高，即是字体最底端与字体内部顶端之间的距离

属性值：

- normal:默认值，默认行高
- number+px:指定行高为像素
- number：指定高为字体大小的倍数

2.6.color：文字的颜色

属性值：

- name:指定颜色的名字
- rgb：指定颜色的rgb

r:0-255

g:0-255

b:0-255

- {颜色的16进制}指定颜色为16进制

以：#开始，后跟6（#rrggbb）为或者3（#rgb）为16进制的数

2.7.text-decoration：设置文字字体的修饰

属性值：

- none:默认没有修饰
- underline：下划线
- line-through:贯穿线
- overline：上划线

2.8.text-align：文本对齐方式

属性值：

- left:默认左对齐
- center：居中
- right：右对齐

2.9.text-transform：字母大小写

属性值：

- none:默认值（无转换）
- capitalize:将第一个字母转换成大写
- uppercase:转换成大写
- lowercase:转换成小写

2.10.text-indent：文本缩进

属性值：

- {number+px}:首行缩进number像素
- {number}:首行缩进number字符

TIP：

font复合属性:

font:font-style font-variant font-weight font-size/line-height font-family

注意：

1. 属性值的位置顺序
2. 除了font-size 和font-family外其他任何一个属性都可以省略、
3. font-variant：文本修饰（normal/small-caps：小写转大写，大写字母变小）

3.CSS背景

3.1 background-color:背景色（transparent/color）

属性值:

- transparent:背景色设置为透明,相当于取消背景色

3.2 background-image:背景图（none/url）

background-image:url("img/bg.jpg");

3.3 backgroud-repeat:设置背景的铺排方式

属性值：

- repeat:默认值（图片横向和纵向平铺）
- no-repeat:背景图像不在平铺
- repeat-x:背景仅在横向平铺
- repeat-y：背景仅在纵向平铺

background-repeat: no-repeat;

3.4 background-position:设置对象背景图片位置

{x-number | top | center | bottom } {y-number | left | center | right } ：控制背景图片在元素的位置：x轴、y轴。其铺排方式为no-repeat。

3.5 background-attachment:设置背景图像的滚动位置

属性值：

- scroll ：默认值。背景图像会随着页面其余部分的滚动而移动。
- fixed : 当页面的其余部分滚动时，背景图像不会移动。

3.6 background:设置背景的复合写法。

background:color image repeat attachment position

4.伪类选择器

伪类：专门表示元素的一种特殊状态

常用伪类：选择器

4.1a标签的伪类

a:visited ：已被访问状态。

a:link ：未访问状态。

a:hover ：鼠标悬停状态。

a:active ：用户激活。

4.2 表单：focus

:focus表单获得焦点时触发样式

4.3 first-child

:first-child 伪类来选择元素的第一个子元素。

:last-child

:nth-child(number)

 <style>
       a:link{/* 这里的Link可以省略*/
           color:red;
       }
        a:visited{
            color:green;
        }
        a:hover{
            color:yellow;
        }
        a:active{
            color:blue;
        }
        input:focus{
            outline: 1px solid indianred;
        }
        ul li:first-child{
            color:chartreuse;
        }
        ul li:last-child{
            color:pink;
        }
        ul li:nth-child(3){
            color:red;
        }
    </style>
</head>
<body>
    <a href="#">点击我 挑转 </a><br/>
    <input type="text">
    <ul>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
        <li>aaa</li>
    </ul>
</body>

结果图：

5. CSS 属性和关系选择器

属性选择器可以根据元素的属性及属性值来选择元素。

5.1 CSS属性选择器

[属性名]:包含指定属性名的元素（常用）

[属性名=值]：属性名的值为指定值的元素（常用）

[属性名~=值]：属性的值包含指定值的元素

[属性名^=值]:属性的值以指定值开头的元素

[属性名$=值]:属性的值以指定值结尾的元素

   <style>
        div.content[title]{
            font-weight:bold;
        }
        input[name=usr]{
            background-color:red;
        }
        div[class^=content3]{
            background-color: #e681ff;
        }
        div[class~=box1]{
            background-color: #53ffc5;
        }

        div[class$=box3]{
            background-color: #ff2cef;
        }
    </style>
</head>
<body>
    <div class="content " title="内容">content1</div>
    <div class="content">content2</div>
    <div class="content3">content3</div>
    <div class="content4 box1 box2">content4</div>
    <div class="content5 box1 box2 box3">content5</div>
    <form action="">
        <input type="text" name="account"/>
        <input type="text" name="usr"/>
    </form>

结果图：

5.2 关系选择器

空格：后代选择器（h1下的所有后代strong）

 <style>
        h1 strong{
            color:#94ff7e;
            background-color: #81a4ff;
        }
    </style>
</head>
<body>
     <h1><strong>关系1</strong><span><strong>关系2</strong></span></h1>
</body>

结果图：

>:只选择儿子元素

<head>
    <style> 
        h1>strong{
            color:#94ff7e;
            background-color: #81a4ff;
        }

    </style>
</head>
<body>
    <h1><strong>关系1</strong><span><strong>关系2</strong></span></h1>
</body>

结果图：

+：兄弟选择器

<head> 
<style>
      /*
      3. 兄弟选择器
       */
        ul li+li+li{
            list-style-type: none;
            color:#ff2cef;
        }
    </style>
</head>
<body>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ul>
</body>

结果图：

6. 伪元素

伪元素：用于向某些选择器设置特殊效果。

伪元素与伪类的区别：

CSS引入伪类和伪元素是为了格式化文档树以外的信息，也就是说伪类和伪元素是用来修饰不在文档树的部分。

伪类：用于当已有元素处于某个特定状态的时候，为其添加相应的样式，这个状态是根据用户行为而动态变化。它只有处于dom树无法描述的状态下才能为元素添加样式，所以称之为伪类。

伪元素：用于创建一些不在文档树中的元素，并为之添加样式。比如我们可以通过：before在一个元素添加ixie文本

总之，伪类操作的对象是文档中已有的元素，而伪元素是创建一个文档外的元素，因此，伪类和伪元素的区别在于有没有创建元素

伪类和伪元素的特点：

伪类和伪元素都不存在于原文档和文档树中
伪类允许出现在选择器的任何位置，而伪元素只能跟在选择器的最后一个简单的选择器后面
伪元素名和伪类名大小写不敏感

有些伪类是互斥的，而其他的可以在同一个元素上。

伪元素：

:before/:after/first-letter/:first-line:前面可以是一个冒号，也可以是双冒号

::selection/::placeholder/::backdrop:前面只能是双冒号

:first-letter:选择标签的第一个字符

<head>    
        <style>
        /*
        1. 选择p标签的第一个字符
         */
        p:first-letter{
            font:30px 黑体;
            color:darkseagreen;
            text-indent:2em;
        }
    </style>
</head>
<body>
<p>总之，伪类操作的对象是文档中已有的元素，而伪元素是创建一个文档外的元素
  因此，伪类和伪元素的区别在于有没有创建元素</p>
</body>

:first-line：选择第一行

 /*
        2.选择第一行
         */
        p:first-line{
            text-decoration:underline;
        }

:before：在标签内容前添加

/*
        3 在标签内容前添加
         */
        p:before{
            content:"加"
        }

:after：在标签内容结束是添加

 /*
       4 在标签内容结束是添加
        */
        p:after{
            content:"*****"
        }

结果显示：

二.CSS浮动布局&盒模型

1. CSS浮动介绍

1.1.什么是浮动？

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

浮动让块级元素不独占一行；目的（使用场景）：可以将块级元素排成一排。

值	描述
left	元素左浮动
right	元素右浮动
none	默认值，不浮动，并显示其在文本中出现的位置
inherit	规定从父元素那里继承float属性的值

1.2.浮动的实现

<head>
    <style>
        .wrapper{
            width:600px;
            margin:0 auto;
            border:1px solid #666;

        }
        .box1,.box2{
           width:200px;
            height:150px;
        }
        .box1{
            background-color: #49ffcc;
            float:left;
        }
        .box2{
            background-color: #41ff49;
            float:right;
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">box1</div>    <!--这里的div属于块级元素要独占一行-->
        <div class="box2">box2</div>
    </div>
</body>

1.3 浮动的原理

就是让元素脱离文档，不在用标准文档

属性值：

- left:左浮动
- right：右浮动
- none：不浮动（默认）
- inherit：继承父元素float的属性值

浮动后不管的块级还是行级元素，不会显示在下一行（解决方法：清楚浮动）。

2. 清除浮动

目的:让后面的元素自动调到下一行

方法：

2.1添加空标，并设置样式：clear:both;

clear:left :清除左浮动

clear：right ：清除右浮动

clear: both: 清除左右浮动

clear:none: 左右浮动都不清除

<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
        .wrapper{
            width:600px;
            margin:0 auto;
            border:1px solid #666;

        }
        .box1,.box2,.box3{
            width:200px;
            height:150px;
        }
        .box1{
            background-color: #49ffcc;
            float:left;
        }
        .box2{
            background-color: #41ff49;
            float:right;
        }
        .clear{
            clear: both;

        }
        .box3{
            background-color: #ffb31f;
        }

    </style>
</head>
<body>
<div class="wrapper">
    <div class="box1">box1</div>    <!--这里的div属于块级元素要独占一行-->
    <div class="box2">box2</div>
    <div class="clear"></div> <!--空标签清除浮动-->
    <div class="box3">box3</div>
</div>
</body>

结果图：

2.2 在要清除浮动的父级添加样式：overflow:hidden;

<head> 
    <style>
        .wrapper{
            width:600px;
            margin:0 auto;
            border:1px solid #666;
            overflow: hidden;/*2. 清除浮动方法2*/

        }
        .box1,.box2,.box3{
            width:200px;
            height:150px;
        }
        .box1{
            background-color: #49ffcc;
            float:left;
        }
        .box2{
            background-color: #41ff49;
            float:right;
        }
       
        .box3{
            background-color: #ffb31f;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">box1</div>    <!--这里的div属于块级元素要独占一行-->
        <div class="box2">box2</div>
    </div>
    <div class="box3">box3</div>
</body>

结果图:

overflow:hidden；超出部分隐藏.,也可以用来实现浮动.

属性值：

- visible ：默认值。内容不会被修剪，会呈现在元素框之外，不剪切也不添加滚动条。
- auto ：不显示超出内容，不剪切，会按照内容是否超出，自动添加，可用作清除浮动。
- hidden ：内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能.
- scroll ：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

2.3 使用：after

在要清除浮动的父元素添加伪元素,并设置样式.

 .wrapper:after{
            content:"";
            display:block;
            clear:both;
        }

 <div class="wrapper">
        <div class="box1">box1</div>    <!--这里的div属于块级元素要独占一行-->
        <div class="box2">box2</div>
 </div>
 <div class="box3">box3</div>

结果图:

*** :实际项目开发过程首选方案2

*** 文本垂直居中：

 display: table-cell;
 vertical-align: middle;

*** padding的四个值：

padding:1px 2px 3px 4px 1px2px3px4px的位置顺序是上右下左(逆时针的方向)

padding:1px2px; 上下1px 左右2px;

padding:1px 2px 3px;上1px 左右2px 下3px;

3. CSS盒子模型

每个元素都是一个盒子，一个盒子由margin（外边距）、border（边框线）、padding（内边距）、content（内容）组成

区别外边距和内边距是以边框为参照物

系统默认外边距为8px。所以项目开发是初始化需要设置为0；

3.1 外边距（margin）

外边距：margin,之边框线之外的距离

margin-left：左边距
margin-right：右边距
margin-top：上边距
margin-bottom：下边距
margin:可以用来设置任意一边的距离，可以带1-4个参数；

1. 1个（apx）：表示上下左右都有apx这个外边距
2. 2个(apx bpx)：表示上下外边距为apx，左右外边距为bpx
3. 3个：(apx bpx cpx) 上为apx 左右为bpx 下为cpx
4. 4个：(apx bpx cpx dpx)：上为apx,右为bpx,下为cpx,左位dpx

3.2 内边距（padding）

内边距：指的是元素文本内容与边框的距离。

用法与margin相同

3.3 边框（border）

属性

- border-width : 设置边框的宽度。
- border-style : 设置边框的样式。

- - none: 默认值，无边框。
  - solid：定义实线边框。
  - double 定义双实线边框。
  - dotted`: 定义点状线边框。
  - dashed：定义虚线边框。

- border-color : 设置边框的颜色。

border 边框的简写： {width style color} ：定义宽度为width，样式为style，颜色为color的边框。

3.4 盒子的真实尺寸

盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：

盒子宽度 = width + padding左右 + border左右

盒子高度 = height + padding上下 + border上下

3.5 display属性

属性值：

- none:不现实元素
- block：块显示，将元素的前后设置换行符，将行级标签转换为块级标签，因为行级标签不识别宽高，块级标签显示，转换后行级标签也可以显示宽高了。
- inline:行内显示，将块级转换为行级。
- inline-block:将块级或者行级比标签转换为行内块标签。

4.table表格

4.1 table

属性：

- height：高度
- width：宽度
- border-collapse：单线边框
- border：边框线

双线边框

 <style>
        table,td{
            border:1px solid #666;
        }
    </style>

结果显示：

单线边框

<style>
    table,td{
        border:1px solid #666;
        border-collapse: collapse;
    }
</style>

结果显示：

4.2 td tr

td，tr属性

- height：高度
- width：宽度
- border:边框线
- text-align:文本左右对其(left（默认）/center/right)
- vertical-align:文本垂直对其方式（top/middle(默认)/bottom）

5. 列表样式

不是描述性的文本，任何内容可以认为是列表。比如：菜单、商品列表等

5.1列表类型：

无序列表（ul）、有序列表(ol)、自定义列表(dl)

ul和ol的列表项都是用li定义的，而dl是由一个dt和一个或多个dd组成

dl一般用来设定一个定义，比如名词解释等。dt：标题，dd：描述，用来对dt内容进行解释并说明。

5.2 样式(用来修改表示类型)

list-style-image：用图像表示标识

 ul{
            /*list-style-type:square;*/
            /*list-style-type:none;*/
            /*list-style-position:outside;*/
            list-style-image:url("img/icon.png");
        }

结果显示：

list-style-position：标识的位置（inside/outside(默认值)）

list-style-type：标识类型

简写：list-style:list-style-image list-style-position list-style-type;

list-style的值顺序任意，且可以省略。

list-style-type的属性值：

无序：disc（实心圆--默认）/circle（空心圆）/square（矩形块）
有序：decimal(默认)/decimal-leading-zreo(数字前有个0)/lower-roman(小写的罗马)/upper-roman(大写的罗马)/lower-alpha(小写字母)/upper-alpha(大写字母)/lower-greek(小写的希纳字母)/lower-latin(小写的拉汀)/upper-latin

  ol{
       list-style-type: decimal-leading-zero;
    }

结果显示：

有序、无序：none：取消类型

5.3 轮播图

作用：主要用于产品或公司相关宣传

组成：

轮播的组图(至少2个以上，不能太多)
控制器
计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link type="text/css" rel="stylesheet" href="css介绍/carousel.css">
</head>
<body>
<!--.carousel>ul.carousel-imgs>li*3>a-->
<div class="carousel">
    <!--1.轮播组图-->
    <ul class="carousel-imgs">
        <li><a href="#"><img src="img/banner_01.jpg"/></a></li>
        <li><a href="#"><img src="img/banner_02.jpg"/></a></li>
        <li><a href="#"><img src="img/banner_03.jpg"/></a></li>
    </ul>
    <!--2. 控制器-->
    <div class="pre"></div>
    <div class="next"></div>
    <!--3. 计数器-->
    <div class="count">
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
</body>
</html>

* {
    margin:0;
    padding:0;
}

li{
    list-style-type:none;
}
a{
    text-decoration:none;
}
.carousel{
    width:1000px;
    height:300px;
    margin:0 auto;
    background-color: #bf82ff;
    position:relative;/*相对定位*/
    overflow: hidden;
}
/*1. 轮播图组*/
.carousel-imgs{
    width:99999px;
}
.carousel-imgs li{
    float:left;
}
.carousel-imgs img{
    width:1000px;
    height:300px;
}
/*2. 控制器*/
.pre,.next{
    width:32px;
    height: 32px;
    position:absolute;/*绝对定位，脱离文档流 相对于relative定位*/
    top:50%;
    margin-top:-16px;
}
.pre{
    background-image:url("../img/prev.png");
    left:50px;
}

.next{
    background-image:url("../img/next.png");
    right:50px;
}

/*3. 技术器*/
.count{
    width:1000px;
    height:10px;
    position:absolute;
    bottom:15px;
}
.count ul{
    width:60px;
    margin:0 auto;
    /*background-color: #f755ff;*/
}
.count ul li{
    width:10px;
    height:10px;
    opacity: .5;
    cursor: pointer;/*鼠标形状设置为手型*/
    background-color:darkgray;
    float: left;
    margin-right:10px;
    border-radius: 50%;/*圆角*/
}
.count ul .active{
    background-color: #ff5951;
    opacity:1;/* 0-1 1 为不透明*/
}