HTML/CSS入门基础知识

于 2020-06-15 10:21:25 发布
阅读量511 收藏 1
点赞数
分类专栏： html/css基础 文章标签： html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IT_qslong/article/details/106757345
版权

文章目录

一、HTML模板简要说明

  1. 声明

  2. HTML基本结构

二、HTML元素

  1. 元素
    1. 闭合元素
      1. < div >< /div >
    2. 空元素
      1. < input type=“text”>
  2. 标签
  3. HTML元素属性
    1. 属性名
    2. 属性值

三、HTML头部

  1. < head >元素
    • < title >元素：定义HTML页面标题
    • < base >元素：定义HTML页面中所以相对URL的根URL。
    • < link >元素：定义HTML页面引入的外部资源
      • < link href=“link-element.css” rel=“stylesheet”>
      • < link rel=“icon” href=“favicon.ico”>
    • < sytle >元素：定义HTML页面的css样式
    • < meta >元素：定义HTML页面的元数据信息，例如编码格式，作者，关键字等
      • '< meta charset=“utf-8”>
    • < script >元素：定义HTML页面的可执行脚本’
    • < noscript >元素：定义当HTML页面的脚本代码不被支持或者浏览器关闭了脚本执行时的替代内容。’

四、HTML注释

CSS概述

层叠样式表

如何使用css

一、内联样式

  • < div style=“color:lightcoral;”>这是测试内容

二、内嵌样式表

  • < style type=“text/css”>

    p{

    ​ color : lightcoral;

    ​ font-size:24px;

    }"

三、外联样式表

  1. 创建一个为.css的文件
  2. 将这个.css文件放到link标签中
    1. “< link rel=‘stylesheet’ href=‘style/a.css’>”
      1. rel属性：用来定义引入文件与当前HTML页面的关系
      2. href属性：定义映入的URL

四、css语法结构

  1. 选择器
  2. 声明块
  3. 注释
    1. /* 内容 */

基本选择器(阶段2 CSS选择器)

一、元素(类型)选择器

元素名{

属性：属性值；

}

二、类(Class)选择器

.className{

属性：属性值；

}

三、ID选择器

#ID{

属性：属性值；

}

四、通用(通配符)选择器

*{

属性：属性值；

}`

五、属性选择器

  1. [attr]属性选择器：通过HTML元素的attr属性名来定位具体的HTML元素
  2. [attr=value]属性选择器：通过HTML元素的attr属性名并且属性值为value来定位具体HTML元素
  3. [attr~=value]属性选择器：通过HTML元素的attr属性名，属性值是一个以空格分隔的列表并且value值是该值列表中的之一，来定位具体的HTML元素
  4. [attr|=value]属性选择器：通过HTML元素的attr属性名并且属性值为value或者以value-为前缀来定位具体HTML元素
  5. [attr^=value]属性选择器：通过HTML元素的attr属性名并且属性值是以value开头来定位的HTML元素
  6. [attr$=value]属性选择器：通过HTML元素的attr属性名并且属性值是以value为结束来定位具体的HTML元素
  7. [attr*=value]属性选择器：通过HTML元素的attr属性名并且属性值是包含value来定位具体HTML元素
选择器的优先级
  1. 分配给指定的CSS声明的一个权重，由匹配的选择器中的每一种选择器类型的数值决定
  2. 当优先级与多个CSS声明中的任意一个声明的优先级相等的时候，CSS中最后的那个声明将会被应用到元素上。
  3. 当同一个元素有多个声明的时候，优先级才会有意义
选择器类型的权重
  1. 通配符选择器的优先级为0
  2. 类型选择器的优先级为1
  3. 类选择器和属性选择器的优先级为10
  4. ID选择器的优先级为 100
  5. 内联样式的优先级为1000
  • 内联样式总会覆盖内嵌样式表和外联样式表中的任何样式

层级选择器

一、层级选择器种类

  1. 后代选择器
    1. 选择器1 选择器2 {
      属性 : 属性值;
      }
  2. 子级选择器
    1. 选择器1>选择器2 {
      属性 : 属性值;
      }
  3. 相邻兄弟选择器
    1. 选择器1+选择器2 {
      属性 : 属性值;
      }
  4. 普通兄弟选择器
    1. 选择器1~选择器2 {
      属性 : 属性值;
      }

组合选择器

一、组合并集选择器

选择器1, 选择器2, ... ... {
属性 : 属性值;
}

二、组合交集选择器

伪类选择器

一、伪类选择器的种类

  1. 动态伪类选择器：常与元素配合使用，用来表示用户的某种行为状态
  2. 目标伪类选择器：常与 <a> 元素配合使用，用来定位当前 HTML 页面中唯一一个目标元素。
  3. 元素状态伪类选择器：常与表单组件元素配合使用，用来表示表单组件的某种状态。
  4. 结构伪类选择器：常与 <table> 元素配合使用，利用 HTML 元素之间的关系定位目标元素。
  5. 否定伪类选择器：用来定位与指定选择器不匹配的 HTML 元素。

二、否定伪类选择器

:not(selector) { 属性 : 属性值; }

伪元素选择器

一、语法

选择器::伪元素 { 属性 : 属性值; }

伪元素选择器只能和基本选择器配合使用，并且一个选择器只能使用一个伪元素选择器，如果要为一个选择器增加多个伪元素选择器需要分别编写。

二、::before 和 ::after 伪元素

::before 伪元素的作用是作为定位的 HTML 元素的第一个子级元素，::after 伪元素的作用是作为定位的 HTML 元素的最后一个子级元素。

三、::first-letter 伪元素

为第一个字设置格式

四、::first-line 伪元素

为第一行文本设置样式

五、::selection 伪元素

颜色(阶段3：颜色与单位)

一、颜色值的类型

色彩关键字
RGB色彩模式
  • 十六进制符号#RRGGBB
  • 函数符rgb
HSL色彩模式

是一种将RGB色彩模型中的点在圆柱坐标系中的表示法

  • H 表示色调，其值范围为 0 ~ 360 之间的一个角度
  • S 表示饱和度，其值范围为 0% ~ 100% 之间的百分值。
  • L 表示亮度，其值使用百分值表示。0%表示黑色，50%表示标准色，100%表示白色

二、透明度

  • 如果值为 0 或 0.0 则表示完全透明
  • 如果值为 0.5 则表示半透明
  • 如果值为 1 或 1.0 则表示不透明

单位

一、CSS单位

  1. 绝对长度单位
    • px
  2. 相对长度单位
    • em父元素的字体大小
    • ex字符"x"的高度
    • ch数字"0"的宽度
    • rem根元素的字体大小
    • lh元素的line-height
    • vw视窗宽度的1%
    • vh视窗高度的1%
    • vmin视窗较小尺寸的1%
    • vmax视图大尺寸的1%

结构化元素(阶段4：HTML—CSS文本)

一、结构化元素

  • 段落p
  • 粗体b
  • 斜体i
  • 上标元素sup
  • 下标元素sub
  • 换行符br
  • 水平线元素hr

二、HTML5结构化元素

  1. < article >元素

    用来定义HTML页面中可独立分配或可以复用的结构

  2. < section >元素

    定义页面中的独立部分

  3. < nav >元素

    定义页面中的导航链接，菜单，目录和索引

  4. < aside >元素

    侧边栏或者标注框

  5. < header >元素

  6. < main >元素

  7. < footer >元素

三、转义字符

原义字符描述转义字符
``空格&nbsp;
<小于号&lt;
>大于号&gt;
&和号&amp;
"引号&quot;
©版权（copyright）&copy;
®注册商标&reg;
™商标&trade;
×乘号&times;
÷除号

语义化元素

一、什么是语义化元素

具有具体含义的元素

  1. < strong >加粗
  2. < em >强调，斜体
  3. < blockquote >缩进，引用
  4. < q >加引号
  5. < cite >引文元素
  6. < dfn >定义元素
  7. < address >地址元素
  8. < del >< ins >内容修改元素

字体样式

一、字体样式

  1. font-family
    • 设置一个字体名或字体族名
      • 通用字体族名
        • serif：带衬线字体
        • sans-serif：无衬线字体
        • monospace：等宽字体
        • cursive：草书字体
        • fantasy：具有特殊艺术效果的字体
    • 设置多个字体名或字体族名
  2. font-size
    • 字体大小
      • 绝对大小值
      • 相对大小值
        • larger
        • smaller
      • 长度值
        • px
        • em
        • rem
        • ex
      • 百分比值
  3. font-weight
    • 粗细程度
      • 绝对值
        • normal=400
        • bold=700
      • 相对值
        • lighter：细
        • bolder：粗
      • 数字值
  4. font-style
    • italic
    • oblique
  5. font
    • 作为简写形式
      • font-style，font-variant，font-weight属性必须定义在font-size属性之前
      • line-height属性必须定义在font-size之后
      • font-family属性必须最后定义
    • 系统字体
      • caption用于标题控件的系统字体
      • icon用于标签图标的系统字体
      • menu菜单中的
      • message-box对话框
      • small-caption小标题控件
      • status-bar窗口转态栏

二、文本样式

  1. text-decoration文本装饰

    • text-decoration-line：元素文本修饰类型
    • text-decoration-color：文本修饰线的颜色
    • text-decoration-style：线的样式

  2. line-height行间距

    • 0403.png
    • normal关键字
      • 默认为1.2
    • 数字值
    • 长度值
    • 百分比值

  3. letter-spacing字母间距

    • normal
    • 长度值：可为负

  4. word-spacing单词间距

    • normal
    • 长度值
    • 百分比值

  5. text-align水平对齐方式

    • start：左到右left，right
    • end：左到右right，left
    • left
    • right
    • center
    • justify：文字向两侧对齐，对最后一行无效
    • justify-all：强制使最后一行两端对齐

  6. vertical-align垂直对齐方式

    • 应用于内联元素
      • 相对于父级元素的值
        • baseline：使元素基线跟父元素的基线对齐
        • sub：使元素基线跟父元素下标基线对齐
        • super：使元素基线跟父元素上标基线对齐
        • text-top：使元素顶部于父元素字体顶部对齐
        • text-bottome：使元素底部与父元素字体底部对齐
        • middle：使元素的中部与父元素的基线加上父元素 x-height 的一半对齐
      • 相对于行的值
        • top：使元素及其后代元素的顶部与整行的顶部对齐。
        • bottom：使元素及其后代元素的底部与整行的底部对齐
    • 应用于表单单元格的值
      • baseline
      • top
      • middle
      • bottom

  7. text-indent文本缩进

    • 长度值：可为负
    • 百分比值
    • each-line：文本缩进影响第一行
    • hanging：反转缩进：除了第一行

  8. text-shadow文本阴影

    • color：颜色
    • offset-x：阴影在水平方向的偏移量
      • 小于0,左偏移
      • 等于0，不偏移
      • 大于0，右偏移
    • offset-y：阴影在垂直方向的偏移量
      • 上偏移，不偏移，下偏移
    • blur-raduis：阴影模糊半径
      • 值越大，模糊半径越大

  9. overflow-wrap

    lDMFQe.png

  10. word-wrap，word-break文本换行

    • break-all
    • keep-all

  11. white-space处理空白

    • normal

    • nowrap

    • pre

    • pre-wrap

    • pre-line

    • break-spaces

_筱龙
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值