HTML和CSS基础

最新推荐文章于 2024-08-01 09:59:14 发布

废八

最新推荐文章于 2024-08-01 09:59:14 发布

阅读量583

点赞数 3

分类专栏：前端文章标签： css html css3

本文链接：https://blog.csdn.net/qq_42571665/article/details/111588103

版权

前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

在这里插入图片描述

HTML

文本

code 标签是一个短语标签，用来定义计算机代码文本。
h1-h6六个不同的 HTML 标题
p 标签定义段落
blockquote标签定义摘自另一个源的块引用
pre 标签可定义预格式化的文本

<h1>This is a heading</h1>
<p>Some text...</p>
<h2>Section 1</h2>
<p>Some text...<code>#include &lt;stdio.h&gt;</code>
</p>
<blockquote cite="https://www.jisuanke.com/plan">
<p>ACM-ICPC 是国际计算机学会主办的国际⼤学⽣程序设计竞赛，被称为计算机领域的奥林匹克竞赛。</p>
</blockquote>
<h2>Section 2</h2>
<p>Some text... <em>glad</em></p>
<pre><code>var para = document.querySelector('p');
para.onclick = function() {
 alert('Owww, stop poking me!');
}</code></pre>

在这里插入图片描述

列表

<h2>常⽤编辑器
</h2>
<ul>
 <li>Vim</li>
 <li>Sublime</li>
 <li>Atom</li>
 <li>Notepad++</li>
</ul>
<h2>如何查看⻚⾯请求</h2>
<ol>
 <li>打开浏览器</li>
 <li>打开调试⼯具</li>
 <li>选择
“⽹络
”标签</li>
 <li>在地址栏输⼊ url 进⼊⻚⾯</li>
</ol>

在这里插入图片描述

链接

<a href="https://www.baidu.com/" target="_blank">百度</a>
<a href="#second-paragraph">第⼆段</a>

在这里插入图片描述

多媒体

<img src="./logo.svg" alt="logo">
<video src="video.webm" autoplay poster="poster.jpg"></video>

表单

<form>
 <div>
 <label>Name: <input type="text" name="name"></label>
 </div>
 <div>
 <label>E-mail: <input type="email" name="email"></label>
 </div>
 <div>
 <label>Gender:</label>
 <label><input type="radio" name="gender" value="female">⼥</label>
 <label><input type="radio" name="gender" value="male">男</label>
 </div>
 <div>
 <button>提交</button>
 </div>
</form>

在这里插入图片描述

结构

在这里插入图片描述

CSS

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>My CSS experiment</title>
 <link rel="stylesheet" href="style.css">
 </head>
 <body>
 <h1>Hello World!</h1>
 <p>This is my first CSS example</p>
 </body>
</html>

h1 {
 color: blue;
 background-color: yellow;
 border: 1px solid black;
}
p {
 color: red;
}

在这里插入图片描述
或者

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>My CSS experiment</title>
 <style>
 h1 {
 color: blue;
 background-color: yellow;
 border: 1px solid black;
 }
 p {
 color: red;
 }
 </style>
 </head>
 <body>
 <h1>Hello World!</h1>
 <p>This is my first CSS example</p>
 </body>
</html>

或者

<!DOCTYPE html> index.html
<html>
 <head>
 <meta charset="utf-8">
 <title>My CSS experiment</title>
 </head>
 <body>
 <h1 style="color: blue; background-color: yellow; border: 1px solid black;">
 Hello World!
 </h1>
 <p style="color:red;">This is my first CSS example</p>
 </body>
</html>

选择器selector

选择器
通用选择器	*
类型选择器	p div span …
类选择器	.class-name
属性选择器	[disabled]
id选择器	#id-name

选择器
后代选择器	（空格） div p
⼦选择器	（>） div > p
邻接选择器（紧随其后的⼀个）	（+） div + p
同级选择器（在其之后的）	（~） div ~ p
逗号选择器	（,） div, p

<ul>
    <li>
    	<a herf='#'>一级菜单</a>
        <a>一级菜单</a>
        <div>
            <a>二级菜单</a>
            <a>二级菜单</a>
        </div>
        
    </li>
</ul>

ul li a{
    color:red;
} #此时li内的所有a标签都变为红色了

ul li>a{
    color:blue;
}#此时只有一级菜单的a标签变为蓝色，二级的不受影响

伪类
:checked
:focus
:hover
:active
:visited
……

伪元素
::after
::before
::first-letter
::first-line
::selection
……

层叠样式表

importance
在属性值后加 !important
Specificity
明确程度
Source Order
出现的较晚的属性值覆盖掉出现得较早的

importance

div{
margin-left:20px!important;
margin-left:40px;
}
如果是在除了IE6的浏览器中，这些浏览器支持!important属性，也就是说他们会默认让margin-left:20px!important; 这条语句生效，下面的不带!important声明的样式将不会覆盖它，换句话说就是他的级别最高，下面的人都不能取代我！

Specificity
在这里插入图片描述

文本样式

样式	值
color颜色	#rrggbb rgb(r, g, b) rgba(r, g, b, a) color-name
font-family	family1, family2, …
font-size	em：相对于⽗元素 rem：相对于 html根元素 px：绝对值
font-style	normal/italic/oblique
font-weight	100-900, normal, bold, lighter, bolder
text-align	left/right/center/justify
line-height	em/rem/px 纯数字：* font-size
letter-spacing word-spacing	em/rem/px
text-decoration文本修饰	none 线型位置颜⾊

color

颜色属性被用来设置文字的颜色。颜色是通过CSS最经常的指定：
十六进制值 - 如: ＃FF0000
一个RGB值 - 如: RGB(255,0,0)
颜色的名称 - 如: red

body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}

在这里插入图片描述

font-family

font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family：“宋体”

font-size

font-size 属性设置文本的大小。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了

rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应

font-style

主要是用于指定斜体文字的字体样式属性。
这个属性有三个值：
正常 - 正常显示文本
斜体 - 以斜体字显示的文字
倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持）

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

在这里插入图片描述

font-weight

font-weight 属性设置文本的粗细

normal 默认值。定义标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符。
lighter 定义更细的字符

text-align

文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

在这里插入图片描述

text-decoration

text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}

在这里插入图片描述

盒模型

在这里插入图片描述

margin外边距

margin-top
margin-right
margin-bottom
margin-left

px/em/rem
n%
auto

百分⽐相对于当前元素的包含块的 width

margin: top right bottom left;
margin: top left&right bottom;
margin:top&bottom left&right;
margin: all-four-sides;

⽔平居中盒⼦内容：将⽔平的 margin 设置为 auto

Margin Collapsing（外边距合并）

相邻同级元素中上⾯元素的 margin-bottom 和下⾯元素的 margin-top 合并为其中较⼤的值
⽗级元素与⼦元素的上/下 margin直接接触时会发⽣合并
空块的上下 margin 合并为其中较⼤的值

间记：
元素内或元素间的上下外边距直接接触时会发⽣合并。
⾏内元素左右外边距直接接触时会发⽣合并

Padding（内边距）

⽤法和 margin 完全⼀样但是不会被合并

Border（边框）

border: width style color;
border-(top/right/bottom/left): width style color;
border-width: top right bottom left;
border-style: top right bottom left;
border-color: top right bottom left;
border-(top/right/bottom/left)-(width/style/color): value;

在这里插入图片描述

注意：祖先元素的宽、⾼都不⼀定⼤于后代的宽⾼，后代的位置也不⼀定在祖先元素内，两者只是结构和逻辑上的关系，⽽⾮⼏何关系

display

block
div/section/p 等元素默认为 block，块级元素，在⽂档流内默认会独占⼀⾏
块元素是一个元素，占用了全部宽度，在前后都是换行符。
inline
span 等元素默认为 inline，⾏内元素，在⽂档流内可以与其他元素同处⼀⾏，并可能折⾏
inline-block
在⽂档流内可以与其他元素同处⼀⾏，但内部不会折⾏
flex
对外表现和 block 相同，但是内容会按照 flex 模型进⾏布局
none
不显示，不出现在⽂档流内。区别于 visibility: hidden（不显示但是仍在⽂档流内）

Flex

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。
在这里插入图片描述
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

flex-direction属性决定主轴的方向（即项目的排列方向）。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它可能取三个值。

（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。 flex 属性是 flex-grow、flex-shrink 和> flex-basis 属性的简写属性。

例子：
在这里插入图片描述

在这里插入图片描述

Float

float: left/right;
clear: left/right/both;

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。

Viewport

vw: 1% 视⼝初始宽度
vh: 1% 视⼝初始⾼度
px 可以⽤的地⽅都可以⽤ vw/vh

Position

position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
在这里插入图片描述

在这里插入图片描述
优先级：top > bottom， left > right（如果是从右向左布局则 right > left）

废八

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录