HTML+CSS基础

2023-09-25 19:26:15

2022.2.27 学习笔记

三、HTML标签（下）

  • 表单标签：在 HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

表单控件(表单元素)：这三组表单元素都应该包含在form表单域里面,并且有 name 属性。

1.input  输入表单元素

2.select 下拉表单元素

<select> 
    <option> 选项 1</option> 
    <option> 选项 2</option> 
    <option> 选项 3</option>
     . . . 
</select>

在<option> 中定义 selected = “ selected " 时 ， 当前项即为默认选中项。

3.textarea 文本域元素

在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。rows= “显示的行数”，cols= “每行中的字符数” ，我们在实际开发中不会使用，都是用 CSS 来改变大小。

<textarea rows="3" cols="20">
     文本内容 
</textarea>

CSS第一趴：

一、CSS简介

1.CSS 是也是一种标记语言。CSS 主要用于设置 HTML 页面中的文本内容（字体、 大小、 对齐方式等）、 图片的外形（宽高、 边框样式、 边距等）以及版面的布局和外观显示样式。

 2.CSS 语法规范：CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。

HTML+CSS基础 所有的样式，都包含在 <style> 标签内 ， 表示是样式表。 <style> 一般写到 </head> 上方。

<head> 
    <style> 
        h4 { color: blue; font-size: 100px; } 
    </style> 
</head>

选择器 分为基础选择器和复合选择器两个大类 

 二、CSS基础选择器

 基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器

1. 标签选择器（元素选择器）是指用 HTML 标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。不能设计差异化样式，只能选择全部的当前标签。

2. 类选择器（ .+class） 如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。记忆口诀：样式点定义，结构类调用。一个或多个，开发最常用。

例如，将所有拥有 red 类的 HTML 元素均为红色。

. red { color: red; }   <div class=‘red’> 变红色 </div>

  • 多类名使用方式 <div class="red font20"> 妲己 </div>

 (1) 在标签class 属性中写 多个类名 (2) 多个类名中间必须用空格分开 (3) 这个标签就可以分别具有这些类名的样式

3.id选择器（ #+id）HTML 元素以 i d 属性来设置 i d 选择器，CSS 中 i d 选择器以 “#" 来定义。注意：id 属性只能在每个 HTML 文档中出现一次。 口诀: 样式#定义,结构id调用, 只能调用一次, 别人切勿使用。

4.通配符选择器 在 CSS 中 ， 通配符选择器使用 “*” 定义，它表示选取页面中所有元素（标签）。通配符选择器不需要调用， 自动就给所有的元素使用样式。

三、CSS字体属性

1.字体样式 {font-style：italic /normal；} 斜体/正常

2.字体粗细 {font-weight：400（normal）/700（bold）；}正常/加粗

3.字体大小 {font-size：20px；}

4.字体系列 {font-family："微软雅黑"；}

5.复合属性 {font：font-style  font-weight  font-size/line-height  font-family；}

使用 font 属性时， 必须按上面语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开。不需要设置的属性可以省略（取默认值，但必须保留 font-size 和 font-family 属性 ，否则 font 属性将不起作用。例如：p{font：italic 700 20px "微软雅黑"；}

四、CSS文本属性

1.文本颜色 {color：red /#ff0000 /rgb(255,0,0)；}

2.文本缩进 {text-indent：2em；}

3.文本修饰 {text-decoration：none /underline /overline /line-through；}

4.文本对齐 {text-align：left /center /right；}

5.行高 {line-height：26px；}

五、CSS的引入方式

1.CSS的三种样式表

  • 行内样式表（行内式）

在元素标签内部的 style 属性中设定 CSS 样式。可以控制当前的标签设置样式。

<p style="color: lightseagreen; font-size: 20px;">要是忘了我的话，那就记住我眼里的光吧。</p>

  • 内部样式表（嵌入式） 

内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中。通过此种方式，可以方便控制当前整个页面中的元素样式设置。

  • 外部样式表（链接式）

 核心是样式单独写到CSS 文件中，之后把CSS文件引入 到 HTML 页面中使用。引入外部样式表分为两步： 1. 新建一个后缀名为 . css 的样式文件，把所有 CSS 代码都放入此文件中。 2. 在 HTML 页面中，使用<link> 标签引入这个文件。

<link rel="stylesheet" href="css 文件路径 ">

HTML+CSS基础

总结：

HTML+CSS基础

六、Chrome调试工具

打开调试工具 打开 Chrome 浏览器，按下shift+f12键或者右击页面空白处选择检查。左边是 HTML 元素结构，右边是 CSS 样式。右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

CSS第二趴：

一、Emmet语法

  • 快速生成HTML结构语法

1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成 <div></div> 2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div 3. 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了 4. 如果有兄弟关系的标签，用 + 就可以了 比如 div+p 5. 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了 6. 如果生成的div 类名是有顺序的， 可以用 自增符号 $ 7. 如果想要在生成的标签内部写内容可以用 { } 表示

  • 快速生成CSS样式语法

CSS 基本采取简写形式即可. 1. 比如 w200 按tab 可以 生成 width: 200px; 2. 比如 l h26px 按tab 可以生成 line-height: 26px;

  • 快速格式化代码

 Vscode 快速格式化代码: shift+alt+f

二、CSS的复合选择器

1.后代选择器 (重要）

后代选择器 又称为包含选择器，可以选择父元素里面子元素。 其写法就是把外层标签写在前面，内层标签写在 后面，中间用空格分隔。 当标签发生嵌套时，内层标签就成为外层标签的后代。

元素 1 元素 2 { 样式声明 }               

上述语法表示选择元素 1 里面的所有元素 2 (后代元素)。元素2 可以是儿子，也可以是孙子等，只要是元素1 的后代即可。元素1 和 元素2 可以是任意基础选择器

2.子元素选择器（重要）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

元素1 > 元素2 { 样式声明 }

上述语法表示选择元素1 里面的所有直接后代(子元素) 元素2。元素2 必须是儿子，其孙子、重孙之类都不归他管. 你也可以叫他 亲儿子选择器。

3.并集选择器（重要）

并集选择器可以选择多组标签, 同时为他们定义相同的样式。 通常用于集体声明。并集选择器 是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

元素 1 , 元素 2 { 样式声明 }

4.伪类选择器

 伪类选择器书写最大的特点是用冒号（:）表示。

  • 链接伪类选择器

a:link        /*选择所有没有被访问的链接*/

a:visited        /*选择所有已经被访问的链接*/

a:hover        /*选择鼠标指针位于其上的链接*/

a:active        /*选择鼠标按下未弹起的链接*/

 为了确保生效，请按照 LVHA 的循顺序声明 : l i nk－ :visited － : hover－ : active。因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

  • :focus伪类选择器

input:focus { background-color:yellow; }

input:focus 伪类选择器用于选取获得焦点的表单元素。 焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

三、CSS元素显示模式

  • 块元素

常见的块元素有<h1>~<h6>、 <p>、 <div>、 <ul>、 <ol>、 <li>等 ，其中 <div> 标签是最典型的块元素。

块级元素的特点： ① 比较霸道，自己独占一行。 ② 高度，宽度、 外边距以及内边距都可以控制。 ③ 宽度默认是容器（父级宽度）的100%。 ④ 是一个容器及盒子，里面可以放行内或者块级元素。

注意：文字类的元素内不能使用块级元素。<p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>。同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

  • 行内元素

常见的行内元素有 <a>、 <strong>、 <b>、 <em>、 <i>、 <del>、 <s>、 <ins>、 <u>、 <span>等， 其中 <span> 标签是最典型的行内元素。 有的地方也将行内元素称为内联元素。

行内元素的特点： ① 相邻行内元素在一行上，一行可以显示多个。 ② 高、 宽直接设置是无效的。 ③ 默认宽度就是它本身内容的宽度。 ④ 行内元素只能容纳文本或其他行内元素。

注意：链接里面不能再放链接。特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全。

  • 行内块元素

 在行内元素中有几个特殊的标签 —— <img />、 <input />、 <td> ，它们同时具有块元素和行内元素的特点。 有些资料称它们为行内块元素。

行内块元素的特点： ① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。 ② 默认宽度就是它本身内容的宽度（行内元素特点）。 ③ 高度，行高、 外边距以及内边距都可以控制（块级元素特点）。

  • 元素显示模式的转换

转换为块元素  display：block；

转换为行内元素  display：inline；

转换为行内块  display：inline-block；

  • 单行文字垂直居中

 小技巧：让文字的行高等于盒子的高度

如果行高小于盒子高度，文字会偏上。如果行高大于盒子高度，则文字偏下。

四、 CSS的背景

1.背景颜色        background-color: 颜色值 ；一般情况下元素背景颜色默认值是 transparent(透明)，我们也可以手动指定背景颜色为透明色。

2.背景图片        background-image : url (images/1.jpg)；背景图片默认值是none(无背景图)，背景图片后面的地址，千万不要忘记加 URL， 同时里面的图片路径不要加引号。背景图片会在背景颜色上方。

3.背景图片平铺        background-repeat: repeat /no-repeat /repeat-x /repeat-y；

HTML+CSS基础

 4.背景图片位置       background-position: x  y；

 参数代表的意思是：x 坐标和 y 坐标。可以使用方位名词或者精确单位。

HTML+CSS基础

参数是方位名词：如果指定的两个值都是方位名词，则两个值的前后顺序无关，比如 left top 和 top left 效果一致。如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

参数是精确单位：如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标。如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中。

参数是混合单位：如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 x 坐标，第二个值是 y 坐标。

上一篇：HTML编码转换


下一篇：现在大多数人们用的前端框架有哪些【大盘点】