CSS的一些知识点总结-CFANZ编程社区

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

菜鸟教程上的定义:
*CSS 指层叠样式表 (Cascading Style Sheets)
*样式定义如何显示 HTML 元素
*样式通常存储在样式表中
*把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
*外部样式表可以极大提高工作效率
*外部样式表通常存储在 CSS 文件中
*多个样式定义可层叠为一个

好处:将内容展示和样式控制分离
*降低耦合性
*让分工协作更容易
*提高开发效率

1>CSS的使用:css与html结合方式:
1.内联样式(不推荐,因为还是相对于藕联)
2.内部样式
3.外部样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css与html结合</title>
    <link rel="stylesheet" href="css/a.css" >
</head>
<body>
<!--第一种不推荐-->
<!--第二种内部样式
在head标签中,定义style标签,style标签的内容就是css代码
<style>
     div{
         color: cadetblue;
     }

 </style>

<div>你好</div>
-->
<!--第三种外部样式
定义css资源文件
之后在head当中用link标签导入外部的资源文件
作用范围广
-->


<div>您好</div>
</body>
</html>

2>选择器:筛选具有相似特征的元素

1.基础选择器:
 *id选择器 定义:选择具体的id属性值的元素,建议html的id值唯一
          语法:#id属性值{}
 *元素选择器 定义:选择相同标签名称的元素
           语法: 标签名称{}

 *类选择器  定义:选择具有相同的class属性值的元素
          语法: .class属性值{}
 *优先级:id选择器>类选择器>元素选择器

<!DOCTYPE html>
<!--选择器
1>分类:
     1.基础选择器:
      *id选择器 定义:选择具体的id属性值的元素,建议html的id值唯一
               语法:#id属性值{}
      *元素选择器 定义:选择相同标签名称的元素
                语法: 标签名称{}

      *类选择器  定义:选择具有相同的class属性值的元素
               语法: .class属性值{}
      *优先级:id选择器>类选择器>元素选择器

2>

-->

<html >
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        #div1{
            color: red;
        }
        .class1{
            color: goldenrod;
        }

    </style>
</head>
<body>

<div id="div1">静水流深</div>
<div>沧笙踏歌</div>
<p class="class1">谁将烟焚散，散了纵横的牵绊。</p>
</body>
</html>

2.扩展选择器:
           *选择所有元素
                       语法: *{}

           *并集选择器
                        语法:选择器1,选择器2{}

           *子选择器
                       定义:筛选1中的2元素
                       语法: 选择器1 选择器2{}
           *父选择器
                       定义:筛选选择器2的父选择器1(就是控制出子选择器上父选择器的标签)
                       语法: 选择器1>选择器2{}
           *属性选择器
                       定义:选择元素名称,属性名=属性值的元素
                       语法: 元素名称[属性名="属性值"]{}
           *伪类选择器
                       定义:定义选择元素的状态
                       语法:元素:状态{}
                          如:<a>
                           状态:
                               link:初始化的状态
                               visited:被访问的状态
                               active:正在访问的状态
                               hover:鼠标悬浮的状

<!DOCTYPE html>
<html>
<!--扩展选择器:
           *选择所有元素
                       语法: *{}

           *并集选择器
                        语法:选择器1,选择器2{}

           *子选择器
                       定义:筛选1中的2元素
                       语法: 选择器1 选择器2{}
           *父选择器
                       定义:筛选选择器2的父选择器1(就是控制出子选择器上父选择器的标签)
                       语法: 选择器1>选择器2{}
           *属性选择器
                       定义:选择元素名称,属性名=属性值的元素
                       语法: 元素名称[属性名="属性值"]{}
           *伪类选择器
                       定义:定义选择元素的状态
                       语法:元素:状态{}
                          如:<a>
                           状态:
                               link:初始化的状态
                               visited:被访问的状态
                               active:正在访问的状态
                               hover:鼠标悬浮的状态
-->
     <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div p{
            color: red;
        }
        div>p{

        }
        input[type='text']{
            border: 4px solid;
        }
        a:link{
            color: red;
        }
        a:hover{
            color: goldenrod;
        }
        a:active{
            color: cadetblue;
        }
        a:visited{
            color: black;
        }
    </style>
</head>
<body>
<div>
    <p>
        子选择器
    </p>
</div>
<div>父选择器</div>
<input type="text"><br>

<a href="#">百度</a>

</body>
</html>

3>属性(直接截图粘上去了)