HMTL入门学习笔记

Posted 2021-07-12 春风十里不如写代码

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HMTL入门学习笔记相关的知识，希望对你有一定的参考价值。

今天的主要学习内容是关于css；如果说html是作为网页的结构，那么css就是网页的表现，主要用于描述网页里的元素是什么样子 (外观)。

CSS是英文Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现HTML或XML等文件样式的计算机语言。CSS与HTML、javascript共同构成了网页开发的三大基础, 又称前端三大技术。接下来就分享一下今天的学习收获。

一、CSS的位置：

1.内联样式：直接在标签内部使用，内联样式一般不使用，开发当中基本上不会出现内联样式

<p style="color:blue;font-size: 30px;">内联样式表</p>

2.内部样式：只适用于当前网页在<head>标签中定义<style>标签进行样式修改

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

     <style>

        /* <h1></h1> 错误*/
        /*
            p：选择器
            {}：样式内容
            语法：样式名：样式值
        */
        p{
            color:rgb(223, 223, 40);
            font-size: 30px;
        }
      </style>
</head>

3.外部样式：适用于多个网页共享样式使用最多

3.1在网页中引入外部样式使用link标签

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

二、CSS基本使用方法与语法

1.看个例子：

<p style="color:red;font-size:18px">段落中文字是红色，大小为18像素</p>

上述代码告诉浏览器，<p></p>中的文字显示为红色，大小为18像素。（快试一下吧！）

我们看到，要为一个标签说明样式，只需在标签中插入”style”属性即可。

2.一些主流的属性在这里列出来：

”主流”样式属性，分了类以方便记忆:

还有许多的内容，可以在用的时候去查阅。

三、css选择器

1.元素选择器

通过元素名选择

2.id选择器

d选择器在元素中是唯一命名的,绝对不能重复

使用#+id值选中

3.类/class选择器使用最频繁

可以重复命名，通过.+类名选中

一个元素当中可以使用多个类名，用空格隔开

4.伪类选择器

伪类（是一种特殊类）：表示元素的特殊状态：

点击时效果，鼠标引入时效果

选择器：伪类名

frist-child:同类元素中的第一个元素

last-child:同类元素中的最后一个元素

nth-child():选择同类元素中指定元素

n 表示0到正无穷

2n 表示偶数行

2n+1表示奇数行

对于诸如超链接 <a> 这样的标签，根据状态不同，它可能显示不同的显示外观。例如下面4个图分别是超链接处于普通链接状态（link）、鼠标处于其上方（hover）、鼠标按住（active）和已访问过（visited）4个不同状态

我们可以如下例更改其外观：

样式表:
a:link { color : black; text-decoration:none;}
a:hover { color : red; text-decoration:underline;}
a:active { color : green; }
a:visited { color : blue; }

5.超链接的伪类

针对于同一个元素来说：内联样式 > id >class >元素

css 单位：像素