html 元素 +css样式和选择器

HTML标签

1、 p标签 段落标签
2、 a链接标签 百度
属性:target target="_self" 在当前网页里面打开 target="_blank" 重新打开一个选项卡,不写则默认当前网页打开,还可以使用a链接 制作锚标
3、br标签 强制换行
4、h标签 时HTML的标题标签 h1~h6 h1是最大的标签 h6是最小的标签
5、文本格式化标签
b 文字加粗
strong 文字加粗
i 文字斜体
em 文字斜体
small 定义小号字
sub 定义下标 sup 定义上标
ins 定义插入字 del 定义删除字
pre 预定义格式化标签
6、 img 图片标签 src属性是图片的路径(远程路径 或者相对路径) alt 属性是图片加载失败的时候显示的内容
7、列表标签
有序列表 ol li 属性type 修改序号的显示
无序列表 ul li
8、表格标签**
table 定义表格
th 定义表头
tr 定义表格的行
td 定义表格的单元
capation 定义表格标题
col 定义表格属性
bgcolor 设置颜色
cellpadding 设置列的内间距的
cellspacing 合并间隙的
rowspan colspan 跨行和跨列

CSS

css样式的写法规则:属性:值;
网页里面的像素单位: px 代表固定像素值,相对屏幕的分辨率的单位值
% 百分比像素值
em 相对单位 相对当前元素文本字体大小 没有设置字体 默认浏览器默认字体大小
rem 相对单位 只相对于 网页的html根元素的字体大小
css里面设置宽高属性:当前元素必须是块级元素 如果要给行级元素设置宽和高 必须转化为块级元素
css 在网页里面分为几种类型:
1.行内样式
2.内嵌样式
3.外部样式

基本样式
1、color 字体颜色
width 设置宽
height 设置高
border 设置边框 soild 实线 dashed 虚线
font-family 字体
font-style 文字样式
font-weight 文字粗体
font-size 文字大小
块级元素
h1~h6 p div ul ol li
特殊行内块元素
img input td
选择器
id选择器 id 选择器以 “#” 来定义 建议id只能有一个 不能同名
class 选择器 类选择器以一个点"."号显示
子父选择器 空格 指的是匹配当前元素的所有后代元素
> 匹配的是当前元素的直接子元素
复合选择器 类选择器和id选择器都存在
样式优先级
三大样式: 行内 内嵌 外部
如果样式之间没有冲突:则样式的优先级是 样式进行叠加 :
行内> 内嵌 > 外部 (内嵌样式在 外部样式加载之后)
行内> 外部 >内嵌 (内嵌样式在外部样式之前加载)
如果样式之间存在冲突,样式优先级是 样式就近原则选取
行内> 内嵌 > 外部 (内嵌样式在 外部样式加载之后)
行内> 外部 >内嵌 (内嵌样式在外部样式之前加载)
内嵌样式选择器优先级
id选择器>class类选择器>元素选择器>*选择器
外部样式的引入
外部样式的引入 使用link 标签
可以引入在 head 或者body
还可以在内嵌样式里面引入
使用@import ‘./css/index.css’

猜你喜欢

转载自blog.csdn.net/weixin_45955339/article/details/105522084