Java全栈学习---前端---CSS

weixin_51267250

已于 2024-04-06 00:20:44 修改

阅读量100

点赞数 3

分类专栏： Java全栈学习---前端文章标签：前端

于 2024-03-24 00:29:14 首次发布

本文链接：https://blog.csdn.net/weixin_51267250/article/details/136978612

版权

Java全栈学习---前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Java全栈学习资料

前端 CSS
Java全栈学习---前端

前端 CSS

第一章 CSS基础

定义

层叠样式表，是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，css使用外部样式表的文件扩展名为.css。

CSS示例

css规则由两个主要部分构成：选择器，以及一条或多条声明。选择器通常是需要改变样式的HTML元素，每一个声明由一个属性和一个值组成（有的属性和属性值一致可以省略属性值）。属性之间使用；分开。声明由{}括起来。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始css</title>
    <style>
        /* CSS使用内部样式，一定要写在head标签中，写在style标签里面 */
        p {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p>体验</p>
</body>
</html>

引入方式

内部样式表
css代码写在style标签里面，放在title标签下面

<head>
    <style type="text/css">
        选择器 {
            属性1:属性值;
            属性2:属性值;
            属性3:属性值;
        }
    </style>
</head>

外部样式表
代码写在单独的css文件中，在HTML中使用link标签引入(最常用)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="CSS路径" type="text/css">
</head>

行内样式
css写在标签的style属性里面

<body>
    <div style="color: red;">内容</div>
</body>

选择器

选择器包括标签选择器、类选择器、id选择器和通配符选择器。

标签选择器
使用的是html标签来作为选择器，

p {
      color: red;
     font-size: 14px;
   }

类选择器
多类选择器
id选择器
通配符选择器
伪类选择器

复合选择器

交集选择器
并集选择器
后代选择器
子元素选择器
属性选择器
伪元素选择器

标签显示模式

块级元素
行内元素
行内块元素
标签显示模式转换

CSS三大特征

CSS层叠性
CSS继承性
CSS优先性

第二章 CSS属性

CSS注释

注释是用来作为提示，防止自己写的代码忘记是什么意义，浏览器不会运行注释。

以/*开始，以*/结束

sublime快捷方式

CSS书写规范

空格规范
选择器规范
属性规范

CSS字体样式属性

CSS外观属性

CSS背景

第三章 CSS

Java全栈学习—前端