软件设计之CSS

news2024/9/20 6:11:20

软件设计之CSS

【狂神说Java】CSS3最新教程快速入门通俗易懂

学习内容：

软件开发技能点参照：软件开发，小白变大佬，这套学习路线让你少走弯路是认真的，欢迎讨论
软件开发技能点顺序参照：Java学习完整路线，强烈建议收藏转发

什么是CSS
四种CSS导入方式
选择器
盒子模型

1、什么是CSS

Cascading Style Sheet 层叠级联样式表
CSS：表现（美化网页）
字体、颜色、边距、稿库、背景图片、网页浮动…

选择器规范

可以创建.css文件，在里面添加选择器代码，对样式进行设计

<!--规范
    选择器{
          声明1;
          声明2;
        }-->

2、四种CSS导入方式

优先级：行内样式最优
其次内部样式与外部样式的优先级以就近原则为准
就近原则：其二者谁在代码中离应用标签更近，优先级就更高

<head>
  <meta charset="UTF-8">
  <title>Example</title>
<!--  内部样式-->
  <style>
    h1{
      color: brown;
    }
  </style>
<!--  外部样式-->
  <link rel="stylesheet" href="css/test.css">
</head>
<body>
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">你好</h1>
</body>

外部样式的两种写法

@import是CSS 2.1特有

<!--  导入式-->
  <style>
    @import "css/test.css";
  </style>
<!--  链接式-->
  <link rel="stylesheet" href="css/test.css">

3、选择器

作用：选择页面上的某一个或者某一类元素

基本选择器

优先级： id选择器>class选择器>标签选择器

(1)标签选择器

标签选择器，会选择到页面上所有的这个标签的元素

  <style>
    h1{
      color: red;
    }
  </style>

(2)类选择器

类选择器的格式 .class的名称{}

  <style>
  .biaoti{
    color: #b3d4fc;
  }
  .duanluo{
    color: aqua;
  }
  </style>
</head>
<body>
<h1 class="biaoti">你好</h1>
<h1 class="duanluo">你好</h1>
</body>

(3)ID选择器

ID选择器格式 #id的名称{}
这里是引用

  <style>
    #biaoti{
      color: red;
    }
  </style>
</head>
<body>
<h1 id="biaoti">标题1</h1>
</body>

层次选择器

(1)后代选择器

在某个元素的后面所有部分
在body后面的p标签全部应用这个样式

  <style>
    body p{
      background: #b3d4fc;
    }
  </style>

(2)子选择器

在某个元素的后面一代
在body后面的仅下一级p标签全部应用这个样式

  <style>
    body>p{
      background: #b3d4fc;
    }
  </style>

(3)相邻兄弟选择器

相邻(向下)，且只有一个
仅p2有对应样式

<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <style>
    .active + p{
      background: #b3d4fc;
    }
  </style>
</head>
<body>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>

(4)通用选择器

当前选中元素向下的所有同级p标签元素应用样式(不限于p标签)

<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <style>
    .active ~p{
      background: #b3d4fc;
    }
  </style>
</head>
<body>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p5</p>
  </li>
  <li>
    <p>p6</p>
  </li>
</ul>
<p>p7</p>
</body>

在这里插入图片描述

结构伪类选择器

<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <style>
    /*ul的第一个子元素*/
    ul li:first-child{
      background: black;
    }
    /*ul的最后一个子元素*/
    ul li:last-child{
      background: green;
    }
    /*选中p标签父元素(body)下的第一个标签，若该标签为p标签，则生效；否则不生效*/
    p:nth-child(2){
      background: red;
    }
  /*选中p标签父标签(body)下的第一个p标签*/
    p:nth-of-type(2){
      background: yellow;
    }
  </style>
</head>
<body>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>
</body>

在这里插入图片描述

属性选择器

<head>
  <meta charset="UTF-8">
  <title>Example</title>
  <style>
    /*demo类下的a标签属性*/
    .demo a{
      font: bold 20px Arial;
      color: #b3d4fc;
    }
    /*a标签中带有id属性的*/
    a[id]{
      background: yellow;
    }
    /*a标签中类包含item的(可以不只是包含item)*/
    a[class *=item]{
      background: black;
    }
    /*a标签中类仅包含links的*/
    a[class = links]{
      background: black;
    }
    /*a标签中href开头为http的*/
    a[href ^=http]{
      background: red;
    }
  </style>
</head>
<body>
<p class="demo">
  <a href="http://www.baidu.com" class="links item" id = "first">你好</a>
</p>
</body>

4、盒子模型

在这里插入图片描述

Margin：外边距
padding：内边距
border：边框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Margin, Border, Padding Example</title>
  <style>
    .box {
      /*外边距定义元素周围的空间。它在元素的外边界之外，可以用来控制元素之间的距离。这里的 20px 表示在盒子的四周各有 20 像素的间距*/
      margin: 20px;
      /*边框是围绕元素内容和内边距的线条。这里的 5px 是边框的宽度，solid 表示边框的样式是实线，#000 是边框的颜色（黑色）*/
      border: 5px solid #000;
      /*内边距是内容与边框之间的空间。这里的 10px 表示内容与边框之间有 30 像素的距离。*/
      padding: 30px;
      width: 200px;
      height: 100px;
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
<div class="box">This is a box</div>
</body>
</html>