提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

前端学习 -- Css

学习前端CSS --
2023-09-14 08:59:00 时间

Css:Cascading Style Sheets

CSS叫做层叠样式表，用来设置页面中元素的样式。背景颜色、字体颜色、字体大小。。。

编写位置：

　　1，内联样式：

　　　　将样式编写到标签的style属性中

　　　　<p style="color:red;"></p>

　　　　

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>超链接</title>
    </head>
    <p style="color:red;">
        风起檐飞雪
    沟壑巧遁形
    置身大漠里
    踏浪烟波中
    </p>
</html>

效果：

如果对其他标签起作用，内联样式就需要复制到其他标签去，这样就显得比较麻烦，无法复用，不易维护。

 

　　2.内部样式表

　　将样式表编写到head中的style标签中

　　<style type="text/css"></style>

　　使用内部样式表，进一步将表现和结构分离，可以同时为多个元素设置样式，方便后期的维护

　　如下对所有的P元素进行样式设置，实现样式的复用

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>雪后漫步</title>
        <style type="text/css">
        P{
            color:red;font-size:20px;
        }
        </style>
    </head>
    <p>
    风起檐飞雪
    沟壑巧遁形
    </p>
    <p>
    置身大漠里
    踏浪烟波中
    </p>
</html>

效果：

缺点：比如我有多个html文件想要公用同一样式，如上两种方式就无法解决，引出如下的实现方式。

　　3.外部样式表

　　将样式表编写到外部的CSS文件中，然后通过link标签将外部文件引入

　　<link rel="stylesheet" type="text/css" href="文件的路径"/>

　　将样式编写到外部样式表中，可以在不同的页面中使用同一个样式表，完全将表现和结构分离，方便后期的维护，推荐使用的方式

　　分别定义两个文件：

  1. style文件
  2. html文件

　　style.css文件：

P {
    color: green;
    font-size: 20px;
}

　　Demo1.html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>雪后漫步</title>
    <!--  <style type="text/css">
      P{
          color:red;font-size:20px;
      }
      </style>-->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<p>
    风起檐飞雪
    沟壑巧遁形
</p>
<p>
    置身大漠里
    踏浪烟波中
</p>
</html>

效果：

Css基本语法：

Css注释：作用和HTML注释类似，只不过它必须编写在style标签中，或者是css文件中

/*

*/

CSS的语法：

选择器{

　　声明块1;

　　声明块2;

　　} 

选择器：

通过选择器可以选中页面中指定的元素，
并且将声明块中的样式应用到选择器对应的元素上

声明块：

声明块紧跟在选择器的后边，使用一对{}括起来，
声明块中实际上就是一组一组的名值对结构，
这一组一组的名值对我们称为声明，
在一个声明块中可以写多个声明，多个声明之间使用;隔开，
声明的样式名和样式值之间使用:来连接。


如：选择器就是p,声明块就是{}包住的地方。

P {
    color: green;
    font-size: 20px;
}

 块元素，内联元素

div就是一个块元素

所谓的块元素就是会独占一行的的元素,无论他的内容有多少
他都会独占一整行。
p h1 h2 h3 ...
div这个标签没有任何语义，就是一个纯粹的块元素，
并且不会为它里边的元素设置任何的默认样式，
div元素主要用来对页面进行布局的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/new_file.css" />
    </head>
    <body>
        <div style="background-color: black;color: white;">春眠不觉晓</div>
        <div style="background-color: green;color: red;">春眠不觉晓</div>
    </body>
</html>

span是一个内联元素（行内元素）

所谓的行内元素，指的是只占自身大小的元素，不会占用一行
常见的内联元素：
a img iframe span
span没有任何的语义，span标签专门用来选中文字，然后为文字来设置样式
块元素主要用来做页面中的布局，内联元素主要用来选中文本设置样式，
一般情况下只使用块元素去包含内联元素，而不会使用内联元素去包含一个块元素
a元素可以包含任意元素，除了他本身
p元素不可以包含任何块元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/new_file.css" />
    </head>
    <body>
    <span>春眠不觉晓</span>
    <span style="color:red;font-size: 20;">处处闻啼鸟</span>
    </body>
</html>

 

子元素和后代元素选择器

元素之间的关系

  1. 父元素：直接包含子元素的元素
  2. 子元素：直接被父元素包含的元素
  3. 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
  4. 后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
  5. 兄弟元素：拥有相同父元素的元素叫做兄弟元素

 

<div id="d1">
            <span>我是div标签中的span</span>
            <p><span>我是p标签中的span</span></p>
        </div>
        
        <div>
            <span>我是body中的span元素</span>
        </div>

 

为div中的span设置一个颜色为绿色

 后代元素选择器

 　　- 作用：
 　　- 选中指定元素的指定后代元素
 　　- 语法：
 　　祖先元素 后代元素{}

#d1 span{
         color: greenyellow;
        }

为div的子元素span设置一个背景颜色为黄色
 子元素选择器
 　　- 作用：
 　　- 选中指定父元素的指定子元素
 　　- 语法：
 　　父元素 > 子元素

　　 IE6及以下的浏览器不支持子元素选择器

div > span{
        background-color: yellow;
        }

 

相关文章