前端笔记-2019.08.05

最新推荐文章于 2025-08-12 20:56:37 发布

casidhe_lyq

最新推荐文章于 2025-08-12 20:56:37 发布

阅读量255

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习笔记文章标签：前端学习笔记

本文链接：https://blog.youkuaiyun.com/qq_37137948/article/details/98538531

学习笔记同时被 2 个专栏收录

13 篇文章

订阅专栏

前端

3 篇文章

订阅专栏

本文详细介绍了HTML的整体结构，包括标签及其属性，如style、id、class等，并深入探讨了CSS的三种应用方式：内嵌样式、内联样式和外联样式。同时，讲解了五种基本的选择器，如元素选择器、id选择器、类选择器等，以及如何使用CSS进行前后景设置、宽度与高度调整、字体和阴影效果的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML

整体结构

声明 <!DOCTYPE html>、head<head></head>、body<body></body>

HTML的标签

开始标签、结束标签

<h1></h1>
<p></p>
……

标签的属性：

属性名、属性值
属性名一般有：style、id、name、class
例;<h1 style="color: red"></h1>
style="color: red"为标签的属性
其中style为属性名，color: red为属性值

由于我之前<h2 id=“233”>，但在css样式设计时发现不可用这个id（233），猜测可能是命名有限制，果然：

官方给出的HTML中的ID的命名规范：
1、必须以字母 A-Z 或 a-z 开头
2、其后的字符：字母(A-Za-z)、数字(0-9)、连字符("-")、下划线("_")、冒号(“:”) 以及点号(".")
3、值对大小写敏感

CSS

3种层叠样式

内嵌样式<h1 style="color: #c9394a">
内联样式<style> h6{color: grey;} </style>
外联样式<link rel="stylesheet" type="text/css" href="h3.css">

内联和外联都在head中

五种基本选择器

元素选择器 标签{}
id选择器 #id{}（井号id）
类选择器 .类名{}（点类名）
属性选择器 [name=“属性名”]{}
通配符选择器 *{} 这个样式对all全体有效

案例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>practice</title>
    <style>
    	h6{
    		color: grey;
    	}
    	#box{
    		color: blue;
    	}
    	.cls{
    		color: orange;
    	}
    	[name="laoli"]{
    		color: green;
    	}
    </style>
    <link rel="stylesheet" type="text/css" href="h3.css">
</head>
<body>
    <h1 style="color: #c9394a">This is a simple Practice!</h1>
    <h2 id="box">This is a simple Practice!</h2>
    <h3 >This is a simple Practice!</h3>
    <h4 class="cls">This is a simple Practice!</h4> 
    <h5 name="laoli">This is a simple Practice!</h5>
    <h6>This is a simple Practice!</h6>
</body>
</html>

h3.css

h3{
	color:yellow
}

在这里插入图片描述

前后景

前景：color
后景：background-color

注意：即使背景为黑色，前景为白色，前景白色依旧会覆盖背景，因为不透明度为100%

宽度与高度

width：300px;
hight：100px;

px为像素

字体

font-family（字体风格）
font-size（大小）
font-weight（粗细，值一般为100-900）

font-family:"微软雅黑",sans-serif;
font-size:48px;
font-weight:900;

阴影

text-shadow: #ff00de -1px  3px  0

-1px是水平偏移，负向左，正向右
-3px是垂直偏移，负向下，正向上
0是模糊度

案例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background:url("1.jpg");
        }
        h1{
            font-size:68px;
            color:white;
        text-shadow:-1px -3px #ff00de,0 0 20px #ff00de;
        }
    </style>
</head>
<body>
<h1>imooc</h1>
</body>
</html>