html+css常用知识点整理

html-css029

html+css常用知识点整理,第1张

特点:自动成一行,宽度为100%,可设置宽高。

常用块级元素:

常用行内元素:

class="定义样式名称"

id="定义样式名称"

href="超链接地址"

name="用锚定义一个标签",通过href链接跳到指定的标签

src="图片的地址"

title="鼠标移上去显示的提示文字"

alt="当图片不显示时,显示的文字"

sytle="书写css样式"

type="定义input类型"

指元素的外边距、边框、内边距,内容大小

文本对齐

float元素对齐/* */

html和css的元素、属性、样式有很多,这里这里只罗列了一些经常用到的知识点,更详细的可以查看参考文档。

CSS简介

CSS是层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

选择器的就是根据不同需求把不同标签选出来。

基础选择器由单个选择器组成包括标签选择器,类选择器,id选择器和通配符选择器

标签名{

属性1:属性值1

属性2:属性值2

属性3:属性值3

...

}

.类名{

属性1:属性值1

...

}

多类名使用 在标签class属性中写多个类名用空格隔开

#id名{

属性1:属性值1

...

}

* { //通配符选择器使用"*"定义,表示选取页面中所有的元素(标签)

属性1:属性值1

...

}

文本缩进:

text-indent: 10px/2em

给定缩进长度或em相对单位一个文字的大小

行间距:

line-height: 26px

详情可参考

https://www.runoob.com/ 菜鸟教程

https://www.w3school.com.cn/ w3c

CSS选择器又被称为CSS样式、CSS属性选择器。是由css命名及后面属性及属性值构成一个整体。

1.基础选择器

a.id选择器:通过设置元素的id属性为该元素制定ID。ID由开发者指定。每个ID在文档中必须是唯一的。在写样式表时,ID选择器是以#开头的。

HTML

CSS

执行效果:

b.class选择器:是以独立于文档元素的方式来指定样式,使用类选择器之前需要在html元素上定义类名,也就是要保证类名在html标记中存在。

HTML

CSS

执行效果:

c.元素选择器:通过note节点名称匹配元素。

HTML

CSS

2.属性选择器:

注意:最后一个选择器是E[attr|=val],由于输入|会对表格造成影响,只能用/代替。

CSS3新增了一些属性选择器,待持续更新。

3.组合选择器

示例如下:

实现效果如下:

示例如下:

从高到低依次是:

1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式

2.作为style属性写在元素标签上的内联样式

3.id选择器

4.类选择器

5.伪类选择器

6.属性选择器

7.标签选择器

8.通配符选择器

9.浏览器自定义

选择器的特殊性值表述为4个部分,用0,0,0,0表示。

参考:

1. css优先级计算规则

2. CSS选择器笔记

3. Selectors MDN

4. CSS3 选择器——基本选择器

5. CSS3 选择器——伪类选择器

6. 征服高级CSS选择器