HTML和CSS基础_html is怎么设置css-CSDN博客

本文链接：https://blog.csdn.net/qq_45041521/article/details/105907316

HTML

概念

Hyper Text Markup Language

超文本：超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本

标记语言：由标签构成的语言，<标签名称>

基础

标签	描述
`<!DOCTYPR>`	定义文档类型
`<html>`	开始和结束的根标签
`<title>`	定义文档的标题
`<body>`	体标签，包含了可见页面内容
`<h1> to <h6>`	标题，自带换行效果
`<p>`	段落
`<br>`	换行
`<hr>`	水平线

元信息

标签	描述
`<head>`	定义关于文档的信息
`<meta>`	定义关于 HTML 文档的元信息
`<base>`	定义页面中所有链接的默认地址或默认目标

格式

标签	描述
`<b>`	加粗
`<big>`	定义大号文本
`<strong>`	定义语气更为强烈的强调文本

表单

标签	描述	属性
`<form>`	定义供用户输入的 HTML 表单	form属性
`<input>`	定义输入控件	input属性
`<textarea>`	定义多行的文本输入控件
`<select>`	定义选择列表（下拉列表）

列表

标签	描述
`<ul>`	定义无序列表
`<ol>`	定义有序列表

表格

标签	描述	属性
`<table>`	定义表格	table属性
`<caption>`	定义表格标题
`<th>`	定义表格中的表头单元格
`<tr>`	定义表格中的行
`<td>`	定义表格中的单元	td属性

CSS

概念

Cascading Style Sheets 层叠样式表

多个样式可以作用在同一个html元素上，同时生效

语法

selector {property1: value1; property2: value2; ... propertyN: valueN }

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

外部样式

<style>
   @import "路径";
</style>

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

CSS选择器

CSS 派生选择器

通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。

li strong {
    font-style: italic;
    font-weight: normal;
  }

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>

CSS id 选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 “#” 来定义。

#red {color:red;}
#green {color:green;}

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

CSS 类选择器

.fancy td {
	color: #f60;
	background: #666;
	}
类名为 fancy 的更大的元素内部的表格单元都会以灰色背景显示橙色文字。

td.fancy {
	color: #f60;
	background: #666;
	}
类名为 fancy 的表格单元将是带有灰色背景的橙色

属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

[title]
{
color:red;
}
为带有 title 属性的所有元素设置样式

[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。

CSS样式

字体、文本

属性	描述
font-size	字体大小
color	文本颜色
text-align	对齐方式
line-height	行高

边框（复合属性）

border：1px(边距) solid(实线) red(颜色); 属性用空格隔开

背景（复合属性）

background：url("相对路径") no-repeat(不重复) center(居中);

尺寸

属性	描述
width	宽度
height	高度

盒子模型（复合属性）

margin:外边距
float:left\right

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px

box-sizing:border-box（设置盒子属性，让width和height就是最终盒子的大小）

链接

form属性

属性	值	描述
`<action>`	URL	规定当提交表单时向何处发送表单数据
`<method>`	get/post	规定用于发送 form-data 的 HTTP 方法
`<name>`	form_name	规定表单的名称

input属性

属性	值	描述
`<type>`	text（文本输入框，默认） submit（提交表单） radio（单选框，要想实现单选，name值必须相同） checkbox（复选框） password（密码输入框）	规定当提交表单时向何处发送表单数据
`<from>`	form_name	规定输入字段所属的一个或多个表单。
`<formaction>`	URL	覆盖表单的 action 属性（适用于 type=“submit” 和 type=“image”）
`<name>`	field_name	定义 input 元素的名称。
`<pattern>`	regex_pattern	规定输入字段的值的模式或格式。
`<placeholder>`	text	规定帮助用户填写输入字段的提示
`<height>`	pixiels	定义输入字段的高度
`<value>`	value	规定 input 元素的值
`<width>`	pixiels	定义输入字段的宽度

table属性

属性	值	描述
`<border>`	pixels	规定表格边框的宽度。
`<width>`	% 、pixels	规定表格的宽度

td属性

属性	值	描述
`<colspan>`	number	规定单元格可横跨的列数
`<rowspan>`	number	规定单元格可横跨的行数
`<align>`	left right center justify char	规定单元格内容的水平对齐方式