[HTML_CSS]一篇文章快速学会HTML_CSS

最新推荐文章于 2022-04-02 16:17:38 发布

置顶螺丝钉tina

最新推荐文章于 2022-04-02 16:17:38 发布

阅读量459

点赞数 2

分类专栏： Full Stack Developer 文章标签： html css html5

本文链接：https://blog.csdn.net/u013716535/article/details/105985999

版权

Full Stack Developer 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

HTML5

19 篇文章 0 订阅

订阅专栏

简介

本文章会直接把HTML_CSS重点知识列出来，一些基础知识大家可以搜索下W3school里面的Html+CSS的知识点，一个下午就可以都实践一遍.

Html5

Css

语法

selector{
	property:value;
	property:value;
	property:value;
}

引用样式的三种方法

外部样式表，通过链接添加到html的部分

    <link rel="stylesheet" type="text/css" href="./css/1.css" />

	<Iwork>HTML+CSS外部样式表</Iwork>

	Iwork{
    font-size: 22px;
    color:green;
	}

内部样式表,head里面用style引入

	<style type="text/css">
    span {
        background: red;
    }
	</style>

  <h3>HTML+CSS内部样式表</h3>

内联样式

<p style="color:red;background:black;">HTML+CSS内联样式</p>

优先级 :内联>内部>外部，但是建议用外部样式，这样便于修改代码

三种选择器

标签选择器
有很多，比如 h3/head/body/span/p/

类选择器

<div class="name">HTML+CSS类选择器</div>

.name{
	    font-size: 22px;
	    color:blue;
		}

id选择器

 <div id="div">HTML+CSS id选择器</div>

#div{
    color:blue;
}

ID选择器只能使用一次，类选择器可以重复只用。
eg:
```
<h1 class="name"><h1>
<h2 class="name"><h2>
```

“特殊选择器”

用的比较少的选择器

伪类选择器
常和a标签一块用，鼠标移动到a标签，会变色
```
 a:hover{color:black;}
```
分组选择器
为多个标签元素设置同一个样式
```
 h1,h2{color:red;}
```
“空格” pk “>”
前者是后代选择器作用于某个标签底下所有的指定标签
后者是子选择器作用于某个标签底下第一代被指定标签
相邻选择器
作用于相邻的标签
eg:ul+li
通配符
属性选择器
div[id=”aaa”],puppeteer经常用这种

背景

background-image

body
{
    background-image:url('./2.jpg');
    background-color:#cccccc;
}

在这里插入图片描述

background-repeat
上面使用的图片小了，水平方向会重复，为了避免，我们可以设置参数
```
background-repeat:no-repeat;
```
background-attachment
设置背景图像是固定还是随着页面滚动条滚动
参数 fixed 固定 / scroll 跟着滚动
background-position
设置背景图像的起始位置
优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器

边距

这个涉及到盒子模型，点这个。要说到一点是，border是非常好用的一个属性，不确定元素大小位置时，就用border

	border{1px;solid;red}

Margin
外边距
Padding
内边距
padding : 10px
作用于四个方向
padding : 5px 10px 5px 10px
顺序是上右下左
padding-top: 80px;
距离距离上边80px

Flex

这一部分知识点很多，又很重要，推荐大家看阮一峰老师的flex布局，一定要动手实践。
(补充，只有代码例子)：
2个div可以并排，通过box-sizing:border-box;忽略掉边框

#left{
    float:left;
    width:70%;
    border:1px solid #ccc;
    box-sizing:border-box;
}
#right{
    float:right;
    width:30%;
    border:1px solid #ccc;
    box-sizing:border-box;
}
//清除浮动
.clearfix{
    clear:both;
}

定位

static 静态定位
relative 相对定位
元素仍处于文档流中，定位是相对于原本自身的位置
absolute 绝对定位
元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据
fixed 固定定位
sticky

实战

使用上面所学知识做一个简单的blog

总结

想学好HTML+CSS,一定要动手实践，把代码敲一遍，留个印象，就可以入门，用的时候直接搜索就行。后期上bootstrap这种框架，使用起来会顺手很多。
本节代码地址

html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="./css/1.css" />
    <title>Document</title>
</head>
<style type="text/css">
    span {
        background: red;
    }
</style>

<body>
    <Iwork>HTML+CSS外部样式表</Iwork>
    <h3>HTML+CSS内部样式表</h3>
    <p style="color:red;background:black;">HTML+CSS内联样式</p>
    <div class="name">HTML+CSS类选择器</div>
    <div id="div">HTML+CSS id选择器</div>
</body>

</html>

css

	Iwork{
	    font-size: 22px;
	    color:green;
	}
	.name{
	    font-size: 22px;
	    color:red;
	    }
	
	#div{
	    color:blue;
	}
	body
	{
	    background-image:url('./2.jpg');
	    background-color:#cccccc;
	    background-repeat:no-repeat;
	}