2024/10/30 日 日志 --》关于CSS的学习
Css基本内容:
点击查看代码
-- CSS
-- 什么是 CSS?
-- CSS 是一门语言，用于控制网页表现
-- CSS(Cascading Style Sheet):层叠样式表
-- W3C 标准:网页主要由三部分组成
-- ·结构:HTML
-- ·表现:CSS
-- ·行为:JavaScript
--
-- CSS导入方式
-- ·CSS 导入 HTML有三种方式:
-- 1.内联样式:在标签内部使用style属性，属性值是css属性键值对
-- <div style="color: red">Hello CSS~</div>
-- 2.内部样式:定义<style>标签，在标签内部定义css样式
-- <style type="text/css">
-- div{
-- color: red;
-- }
-- </style>
-- 3. 外部样式:定义link标签，引入外部的css文件
-- <link href="demo.css" rel="stylesheet" >
-- ·demo.css:
-- div{
-- color: red;
-- }
-- 例：
-- <!DOCTYPE html>
-- <html lang="en">
-- <head>
-- <meta charset="UTF-8">
-- <title>导入方式</title>
-- <style>
-- span{
-- color:red;
-- }
-- </style>
--
-- <link href ="../css/demo.css" rel = "stylesheet">
--
-- </head>
-- <body>
--
-- <div style = "color : red">hello css</div>
--
-- <span>hello css</span>
--
-- <p>hello css</p>
-- </body>
-- </html>
-- -- --------
-- p{
-- color:red;
-- }
--
-- Css选择器
-- ·概念:选择器是选取需设置样式的元素(标签)
-- div{color: red;}
-- 分类:
-- 1. 元素选择器
-- 元素名称{color: red;}
-- div{color:red;}
-- id选择器
-- #id属性值{color: red;}
-- #name{color: red;}
-- <div id="name">hello css2</div>
-- 类选择器
-- .class属性值{color: red;}
-- .cls{color: red;}
-- <div class="cls"> hello css3</div>
-- 例：
-- <!DOCTYPE html>
-- <html lang="en">
-- <head>
-- <meta charset="UTF-8">
-- <title>css选择器</title>
--
-- <style>
-- div {
-- color: red;
-- }
-- /*谁选择的范围小谁生效*/
-- #name{
-- color: blue;
-- }
--
-- .cls{
-- color: pink;
--
-- }
--
-- </style>
--
-- </head>
-- <body>
--
-- <div>div1</div>
-- <div id = "name">div2</div>
-- <div class = "cls">div3</div>
--
-- <span class="cls">span</span>
--
-- </body>
-- </html>
--
-- Css属性
-- https://www.w3school.com.cn/
--
--------------Moonbeams