html与css基础概念以及选择器的使用

用户8806974171846
199 阅读6分钟

# html与css的概念

html全称为 hyper text work up,中文名称为超文本标记

特点

1:它决定内容结构

2：标记性语言

3:html5草案在2008年发行，2012年形成为稳定版本

css的全称为cascading style sheets, 中文名为层叠样式表 特点 1:它决定页面表示的基础，可以控制布局 控制元素风格

2：表示性性语言

3:css3在1996年时引入，使用时注意模块化

# html5的变化

标签：

1:增加doctype、meta

2:新增意义化标签

3:去掉纯展示性标签

4:添加了canvas、video、audio、本地储存、拖拽

语法：

1:标记不区分大小写，但是推荐小些

2:空标记可以不闭合

3:属性值可以不添加引号，但是推荐双引号

4:属性值中包含true和false的可以省略

# css如何在html引入：

外联样式表：

1:在vscode里面分别创建html和css文件表

2:在html里输入link并形成关联

<link rel="stylesheet" href="css.css">

3、内联样式表：在里插入 

<head>
<style>
         p{
            font-size: 50px;color: blueviolet;
        } 
    </style>
<head>  

4、行内样式表：

在body里面插入p元素，然后在开始标记里面加入style 元素编辑即可

<body>
    <p style="color: brown;
    font-size: 50px;">外联样式表</p>
</body>

5、导入样式表：加@import

# 元素选择器的使用

直接用标记名{声明块}引用

p{
    font-size: 50px;color: rgb(223, 71, 71);
}

### 类元素选择器的使用

首先要取类名（用class命名）：

                    1不能是纯数字

                    2:要望名知意

取名有三种方法：驼峰命名法：例：footerTop

蛇形命名法: 例：footer_Top

匈牙利命名法 例：footer-Top

id选择器：

1:开始标记里面加入id空格然后取名

<p id="sd">123<p>

2:在css里用#id引用

#id{
    font-size: 50px;color: rgb(223, 71, 71);
}

3:注意id选择器只能使用一次

子级选择器

1:需要有嵌套

<p id="sd">123
        <h2 class="fg">456</h2>
        <p>

2:必须是父元素>子元素

.sd>h2{
    font-size: 50px;color: rgb(223, 71, 71);
}

3:特点是只能一级一级选择

css重置数据

1:新建一个css样式表（rest）与html关联

2:在html里新建一个link，但必须是首行link

<link rel="stylesheet" href="rest.css">
    <link rel="stylesheet" href="css.css">

3:在新建rest样式表里粘贴上重置代码即可

# 结构元素

结构元素有<head>头部,<nav>导航,，<section>整体的一部分主题,<article>独立存在页面的内容,<footer>脚部

# 文本元素

h1-h6：标题元素，p：段落元素，strong：重要文本，b突出显示文字，em：表示强调的文本，斜体，i：应区别对待的文本，blockquote：整段引用，cite：对参考文献的引用，q：小段文本的引用，abbr：对缩写词的引用，span：跨越多个字符

注：strong和b两个标记有一定的差别，strong强调文本的重要性，b在文本上突出的文本

其中使用a元素时，如果需要在当前页面打开链接则target后面用"_slef"(此为默认项)

<a href="test" target="_slef">打开链接</a>

如果需要在新页面打开链接则在target后面用"_blank"

 <a href="test" target="_blank">打开链接</a>

# 路径

分为相对路径和绝对路径

相对路径是引用站内资源：

1:如果文件在同一个目录中，可以直接引用

2:如果问在不在同一个目录中，则需要./先选中当前目录，然后../退回上级目录再进行引用

绝对路径是引用站外资源：

访问方式是

 <a href="此处输入外网链接" target="_blank">打开链接</a>

实体字符

如果需要字体之间有空格则使用& nbsp ;

```html
<p>
        李灿&nbsp;&nbsp;李灿&nbsp;&nbsp;李灿
    </p>

如果需要显示>符号则使用& gt ;

<p>
        李灿&gt;李灿李灿
    </p>

如果需要显示<符号则使用& lt;

<p>
        李灿&lt;李灿李灿
    </p>

如果需要显示符权符号则需要使用& copy;

<p>
        李灿&copy;李灿李灿
    </p>

如果需要使用注册符号则需要使用& reg;

<p>
        李灿&reg;
    </p>

如果需要符号在字体上方则加入

<p>
        李灿<sup>&reg;</sup>
    </p>

如果需要符号在字体下方则加入

<p>
        李灿<sub>&reg;</sub>
    </p>

# 关于css

设置元素内容 ： color color ； red

设置字体大小： font-size: 28px

设置元素内容对齐方式：tex-align： tex-align:center

设置内容文字粗细： font-weight: font-weight:blod

# 颜色单位

1：16进制由#表示，后面跟3位或6位数

2: 直接选择颜色

3: rgb值（由rgb函数声明，值从0-255整数）

​ （Reba:a值从0-1）

4；hsl值：色环上的一个角度，能调饱和度亮度，值从0-100%表示

# 长度单位

1；绝对长度。 示例：200 (值) px（米）

px根据分辨率的不同会有所不同

2:相对长度

%在不同的 css属性中有不同含义

em相对于当前元素的字体大小

rem相对于跟元素的大小

# css选择器

1:通配符选择器：使用方法*{}

*{
    color: wheat;
}

 <body>
    <p>前段课程</p>
    <h1>选择器</h1>

</body>

2:后代选择器：使用方法：不用谢>，直接祖先关系（空格）后代，元素声明块

<body>
    <p>前段课程</p>
    <h1>选择器</h1>

</body>

body h1{
    color: violet;
}

3:并集选择器：需要用逗号隔开，可选中通个原素中的class内容

<body>
    <p>前段课程</p>
    <h1>选择器

    </h1>
    <h2 class="test">并集选择器</h2>
    <h2>pppp</h2>

</body>

p,h1,.test{
    color: turquoise;
}

4：伪类选择器

<body>
    <p>前段课程</p>
    <h1>选择器

    </h1>
    <h2 class="test">并集选择器</h2>
    <h3>
        <section>第四</section>
        <section>第三</section>

        <section>第二</section>
        <section>第一<section>
    </h3>
</body>

h3>section:first-child{color: tomato;
    
}
h3>section:last-child{color: thistle;}

# 与a标签匹配的伪类选择器

Link:访问前

Visited;访问后

Hover:鼠标移入时

Active:访问点击时

 <a
        href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%85%A8%E7%BA%A2%E5%A9%B5%E6%A2%A6%E6%83%B3%E5%BC%80%E4%B8%AA%E5%A4%A7%E8%B6%85%E5%B8%82&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">第一</a>
    <a
        href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E4%BA%9A%E6%9C%B5%E9%85%92%E5%BA%97%E7%A7%B0%E6%93%8D%E4%BD%9C%E4%B8%8D%E8%BF%9D%E8%A7%84+%E5%AE%98%E6%96%B9%E6%9C%AA%E8%AE%A4%E5%8F%AF&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1">第二</a>


a:link {
    color: teal;
}

a:visited {
    color: violet;
}

a:hover {
    color: yellowgreen;
}

a:active {
    color: yellow;
}

：nth-child(填数字)：匹配父元素的第n个子元素，括号里面直接写数字

：nth-dhild（add）：匹配基数儿子

：nth-child（even）：匹配偶数儿子

：nth-child（3n/3n+1）：n为1

p：nth-of-type（2）：匹配父元素中指定类型的第二个儿子

声明冲突

属性相同值不同就是声明冲突

# 层叠

层叠是一种机制，用来解决声明冲突

# 层叠过程

1：比较优先级

重要声明：！inportant 例如：color：red ！important

重要声明都有优先级

浏览器<用户样式表<作者样式表<作者样式表中的重要声明<用户样式的重要声明

2:比较特殊性

规则使用范围越大，特殊性越低，使用范围越小。特殊性越高

行内样式>ID选择器>类选择器>元素选择器>通配符选择器

3；比较源次序

# 什么是继承？

1:继承是指子元素自动拥有父元素某些css属性

可继承的属性：color font-size font-weight text-align

不可继承的属性：background-color

2：继承具有传递性

3:强制继承：将css属性值设置为inherit

# 属性值计算过程

无属性值➡️确定声明值➡️层叠冲突➡️使用继承➡️使用默认值➡️每个属性都有值

avatar
文章
阅读
粉丝