特点:自动成一行,宽度为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选择器