html+css知识点总结:

 

html:

css:

1.什么是css?

  1. css指层叠样式表
  2. css定义如何显示html元素
  3. 样式通常存储在样式表中
  4. 外部样式表可以极大提高工作效率
  5. 外部样式表通常存储在css文件
  6. 多个样式定义可以层叠为一

2.css三种设置样式

  1. 行内样式法(用的很少):在行内标签里面添加style属性
  2. 内部样式表法(写在head里面,添加style属性)
  3. 外部样式表法(需要一个link标签 )

3.选择器(在列表中选择指定元素)

1.统一表达式: 选择器{ 样式:值; }

优先级(权重值):id选择器(100)>class选择器(10)>类选择器(1)

  1. 标签选择器(直接找到对应标签名,统一设置一组标签样式)
  2. id选择器(#+id名称)
  3. class选择器 [又名类选择器](.+class名称)
基础背景属性
  1. 背景颜色background-color
    1. 直接定义法(用英语单词)
    2. 16进制定义法:#****** 0-f
    3. 三原色定义法:rgb(*,*,*) 0-255
  2. 背景图background-image :url();url后面跟图片的相对路径
  3. 背景图重复方式(默认是平铺)background-repeat:no-repeat;(改为不重复)
  4. 背景图位置 (水平位置) (垂直位置)background-position:垂直 水;平或者写两个像素值 ;
边框属性
  1. 宽度
  2. 线性
    1. solid实线
    2. dashed虚线
    3. datted点划线
  3. 边框颜色

4.盒模型

盒模型:一个元素实际在网页中所占位置大小

宽度=width+border-width+padding+margin

高度=hight+border-hight+padding+maigin

基本表格属性

  1. 边框重合border-collaps(边框合并)

5.列表属性

  1. 列表符号类型list-style-type:circle squire:
  2. 将列表符号改成图片list-style-image:url(路径);
  3. 列表符号位置(了解即可,没什么用)

6.内填充和外边距

  1. 内填充

    padding:多少px内填充。元素(盒子)和内容之间距离;

  2. 外边距

    margin多少px外边距,元素和元素(盒子)之间距离;

    元素水平居中:margin:0 auto

7.定位属性

  1. 相对定位position:relative;根据自己的初始定位定位,依然占据原位置。
    • top 把元素向上推
    • right 把元素向右推
    • bottom 把元素向下推
    • left 把元素向左推
  2. 绝对定位position:absolute; 需要找父级
    • top 把元素向上推
    • right 把元素向右推
    • bottom 把元素向下推
    • left 把元素向左推
  3. 固定定位position:fixed;
    • top 相对界面上侧距离
    • right 相对界面右侧距离
    • bottom 相对界面下侧距离
    • left 相对界面左侧距离

浮动属性

浮动作用:块元素并排显示,想让谁并排就给谁添加浮动

给两个div选择器中加两个float:left;就能实现并排

注意注意!添加浮动后,元素不占位置!!!

8.高级选择器

  • 通用选择器

    解释:“*”号选择器是通用选择器,功能是匹配所有 html 元素的选择器包括和标签

  • 分组选择器

    p,span {color: red;}解释:将多个选择器通过逗号分割,同时设置一组样式。当然,不但可以分组元素选择器,还可以使用 D选择器、类选择器、属性选择器混合使用。

  • 后代选择器

    p span {color: red}解释:选择

    元素内部所有元素。不在乎的层次深度。当然,后代选择器也可以混合使用ID选择器、类选择器、属性选择器。

  • 子选择器

    ul>ln{}解释:子选择器类似与后代选择器,而最大的区别就是子选择器只能选择父元素向下一级的元素,不可以再继续向下选择。

  • 相邻兄弟选择器

    p +h1{color: red;}解释:相邻兄弟选择器匹配和第一个元素相邻的第二个元素。

  • 普通兄弟选择器

    p-h1{color:red;}解释:普通兄弟选择器匹配和第一个元素后面的所有元素

9.文本基本属性

  • color颜色
  • front-size字号
  • front-family字体
  • font-weight加粗
  • font-style倾斜

1.字号大小font-size50px
解释:设置文本的大小。
2字族(字体)font-family:”黑体”解释:使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体,可以做几 个后备字体
3.字体加粗font-weight: bold;
解释:设置字体是否加粗。
4.字体倾斜 font-stvle:italic
解释:设置字体是否倾斜:
1.text-decoration解释:设置文本出现装饰线。underline下划线 overline上划线line-through 删除划线 none取消装饰线
2.text-transform解释:设置英文文本转换为大小写。uppercase 全部转化为大写lowercase 全部转化为小写 capitalize首字母大写3text-align
解释:指定文本的对齐方式。left向左对其 center居中对齐right 向右对齐 justify内容两段对齐,适用于多行文字
4.text-indent
解释:设置文本首行的缩进。多少px
5.letter-spacing
解释:设置字母之间的间距。 多少px
6.word-spacing解释o设置文本之间的间距。多少px

10.元素转化

1display: block 块元素
2.display:inline 行元素
3.display:none隐藏元素
4.display:inline-block 行级块元素

动画效果

transition-property:设置元素中参与过渡的属性;
transition-duration:设置元素过渡的持续时间;
transition-timing-function:设置元素过渡的动画类型;
transition-delay:设置过渡效果延迟的时间,默认为 0;
transition:简写属性,用于同时设置上面的四个过渡属性

动画中常见函数

1.rotate:
rotate(angle)定义2D旋转
rotateX(angle) x 轴 横向移动
rotateY(angle) y 轴 竖向移动
rotateZ(angle) 双向移动
rotate3d(angle)定义3d旋转
rotate3d(1, 0, 1, -180deg);顺时针旋转消失 --加上deg
2 .translate:
translate()相当于水平平移,+ 表示向右/下,- 表示向左/上
translateX(x)水平方向平移
translateY(y)垂直方向平移
translateZ(z)相当于放大
translate(x,y)相当于水平平移+垂直平移
translate(x,y,z)相当于水平平移+垂直平移+放大 --加上px
3.scale效果图
scale(数值)定义倍数缩放,
scaleX()通过x轴定义,仅水平方向缩放
scaleY()通过y轴定义,仅垂直方向缩放
scaleZ()通过z轴定义,定义3d缩放
(transform)常用属性
transform-origin: 0 0;设置变形的原点 默认值(center)

源码:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css知识点汇总 </title>
    <style>
         .box{
            width: 30px;
            height: 30px;
            /* 背景颜色 */
            background-color:rgb(255, 2, 2);;
         }
         .box1{
            width: 30px;
            height: 30px;
            border-width: 2px;
            border-style: solid;
            border-color: rgb(179, 0, 255);
         }
    </style>
</head>
<body>
    <h3>1.什么是css?</h3>
    <ol>
        <li>css指层叠样式表</li>
        <li>css定义如何显示html元素</li>
        <li>样式通常存储在样式表中</li>
        <li>外部样式表可以极大提高工作效率</li>
        <li>外部样式表通常存储在css文件</li>
        <li>多个样式定义可以层叠为一</li>
    </ol>
    
    <h3>2.css三种设置样式</h3>
    <ol>
        <li>行内样式法(用的很少):在行内标签里面添加style属性</li>
        <li>内部样式表法(写在head里面,添加style属性)</li>
        <li>外部样式表法(需要一个link标签 )</li>
    </ol>
    <h3>3.选择器(在列表中选择指定元素)</h3>
    <h4>1.统一表达式:
        选择器{
            样式:值;
    }
    </h4>
    <ol>
        <li>标签选择器(直接找到对应标签名,统一设置一组标签样式)</li>
        <li>id选择器(#+id名称)</li>
        <li>class选择器 [又名类选择器](.+class名称)</li>
        <p>优先级(权重值):<u>id选择器(100)>class选择器(10)>类选择器(1)</u></p>
    </ol>
    <h4>基础背景属性</h4>
    <ol>
        <li>背景颜色<b>background-color</b><ol>
            <li>直接定义法(用英语单词)</li>
            <li>16进制定义法:#****** 0-f</li>
            <li>三原色定义法:rgb(*,*,*) 0-255</li>
        </ol></li>
        <li>背景图<b>background-image :url();</b>url后面跟图片的相对路径</li>
        <li>背景图重复方式(默认是平铺)<b>background-repeat:no-repeat;(改为不重复)</b></li>
        <li>背景图位置 (水平位置) (垂直位置)<b>background-position:垂直 水;平或者写两个像素值 ;</b></li>
        <div class="box"></div>
    </ol>
    <h4>边框属性</h4>
    <ol>
        <li>宽度</li>
        <li>线性
            <ol>
                <li>solid实线</li>
                <li>dashed虚线</li>
                <li>datted点划线</li>
            </ol>
        </li>
        <li>边框颜色</li>
    </ol>
   <div class="box1"></div>
   <h3>4.盒模型</h3>
   <p>盒模型:一个元素实际在网页中所占位置大小</p>
   <p>宽度=width+border-width+padding+margin</p>
   <p>高度=hight+border-hight+padding+maigin</p>
   <h3>基本表格属性</h3>
   <ol>
    <li>边框重合<b>border-collaps(边框合并)</b></li>
   </ol>
   <h3>5.列表属性</h3>
   <ol>
    <li>列表符号类型<b>list-style-type:circle squire:</b></li>
    <li>将列表符号改成图片<b>list-style-image:url(路径);</b></li>
    <li>列表符号位置(了解即可,没什么用)</li>
   </ol>
   <h3>6.内填充和外边距</h3>
   <ol>
    <li>内填充<p>padding:多少px内填充。元素(盒子)和内容之间距离;</p></li>
    <li>外边距<p>margin多少px外边距,元素和元素(盒子)之间距离;</p><b>元素水平居中:margin:0 auto</b></li>
   </ol>
   <h3>7.定位属性</h3>
   <ol>
    <li>相对定位<b>position:relative;</b>根据自己的初始定位定位,依然占据原位置。
    <ul>
        <li>top <b>把元素向上推</b></li>
        <li>right <b>把元素向右推</b></li>
        <li>bottom <b>把元素向下推</b></li>
        <li>left <b>把元素向左推</b></li>
    </ul></li>
    <li>绝对定位<b>position:absolute; 需要找父级</b>
        <ul>
            <li>top <b>把元素向上推</b></li>
            <li>right <b>把元素向右推</b></li>
            <li>bottom <b>把元素向下推</b></li>
            <li>left <b>把元素向左推</b></li>
        </ul></li>
        <li>固定定位<b>position:fixed;</b></li>
        <ul>
            <li>top <b>相对界面上侧距离</b></li>
            <li>right <b>相对界面右侧距离</b></li>
            <li>bottom <b>相对界面下侧距离</b></li>
            <li>left <b>相对界面左侧距离</b></li>
        </ul></li>
   </ol>
   <h3>浮动属性</h3>
   <p>浮动作用:块元素并排显示,想让谁并排就给谁添加浮动</p>
   <p>给两个div选择器中加两个float:left;就能实现并排</p>
   <p>注意注意!添加浮动后,元素不占位置!!!</p>
   <h3>8.高级选择器</h3>
   <ul>
    <li>通用选择器
        <p>解释:“*”号选择器是通用选择器,功能是匹配所有 html 元素的选择器包括<html>和<body>标签</p>
    </li>
    <li>分组选择器
        <p><p>p,span {color: red;}解释:将多个选择器通过逗号分割,同时设置一组样式。当然,不但可以分组元素选择器,还可以使用 D选择器、类选择器、属性选择器混合使用。</p>
    </li>
    <li>后代选择器
        <p>p span {color: red}解释:选择<p>元素内部所有<span>元素。不在乎<b>的层次深度。当然,后代选择器也可以混合使用ID选择器、类选择器、属性选择器。</p>
    </li>
    <li>子选择器
        <p>ul>ln{}解释:子选择器类似与后代选择器,而最大的区别就是子选择器只能选择父元素向下一级的元素,不可以再继续向下选择。</p>
    </li>
    <li>相邻兄弟选择器
        <p>p +h1{color: red;}解释:相邻兄弟选择器匹配和第一个元素相邻的第二个元素。</p>
    </li>
    <li>普通兄弟选择器
    <p>p-h1{color:red;}解释:普通兄弟选择器匹配和第一个元素后面的所有元素</p>
    </li>
   </ul>
   <h3>9.文本基本属性</h3>
   <ul>
    <li>color<b>颜色</b></li>
    <li>front-size<b>字号</b></li>
    <li>front-family<b>字体</b></li>
    <li>font-weight<b>加粗</b></li>
    <li>font-style<b>倾斜</b></li>
   </ul>
   <p>1.字号大小font-size50px <br>
    解释:设置文本的大小。<br>
    2字族(字体)font-family:”黑体”解释:使用指定字体名称。这里使用的字体是浏览者系统的字体。有时为了兼容很多浏览者系统的字体,可以做几
    个后备字体<br>
    3.字体加粗font-weight: bold;<br>
    解释:设置字体是否加粗。<br>
    4.字体倾斜 font-stvle:italic<br>
    解释:设置字体是否倾斜:<br>
    1.text-decoration解释:设置文本出现装饰线。underline下划线 overline上划线line-through 删除划线 none取消装饰线<br>
    2.text-transform解释:设置英文文本转换为大小写。uppercase 全部转化为大写lowercase 全部转化为小写 capitalize首字母大写3text-align<br>
    解释:指定文本的对齐方式。left向左对其 center居中对齐right 向右对齐 justify内容两段对齐,适用于多行文字<br>
    4.text-indent<br>
    解释:设置文本首行的缩进。多少px<br>
    5.letter-spacing<br>
    解释:设置字母之间的间距。 多少px<br>
    6.word-spacing解释o设置文本之间的间距。多少px</p>
    <h3>10.元素转化</h3>
    <p> 1display: block 块元素<br>
        2.display:inline 行元素<br>
        3.display:none隐藏元素<br>
        4.display:inline-block 行级块元素</p>
        <h3>动画效果</h3>
        <p>transition-property:设置元素中参与过渡的属性;<br>
            transition-duration:设置元素过渡的持续时间;<br>
            transition-timing-function:设置元素过渡的动画类型;<br>
            transition-delay:设置过渡效果延迟的时间,默认为 0;<br>
            transition:简写属性,用于同时设置上面的四个过渡属性</p>
        <h3>动画中常见函数</h3>
        <p>
        1.rotate:<br>
        rotate(angle)定义2D旋转<br>
        rotateX(angle) x 轴 横向移动<br>
        rotateY(angle) y 轴 竖向移动<br>
        rotateZ(angle) 双向移动<br>
        rotate3d(angle)定义3d旋转<br>
        rotate3d(1, 0, 1, -180deg);顺时针旋转消失 --加上deg <br>
        2 .translate:<br>
        translate()相当于水平平移,+ 表示向右/下,- 表示向左/上<br>
        translateX(x)水平方向平移<br>
        translateY(y)垂直方向平移<br>
        translateZ(z)相当于放大<br>
        translate(x,y)相当于水平平移+垂直平移<br>
        translate(x,y,z)相当于水平平移+垂直平移+放大 --加上px <br>
        3.scale效果图<br>
        scale(数值)定义倍数缩放,<br>
        scaleX()通过x轴定义,仅水平方向缩放<br>
        scaleY()通过y轴定义,仅垂直方向缩放<br>
        scaleZ()通过z轴定义,定义3d缩放<br>
        (transform)常用属性<br>
        transform-origin: 0 0;设置变形的原点 默认值(center) <br>
        </p>
    </body>
</html>

  • 40
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5和CSS是网页开发中常用的两种技术。HTML5是一种用于创建网页结构和内容的标记语言,而CSS则是一种用于控制网页样式和布局的样式表语言。 在使用HTML5和CSS进行网页开发时,我们通常需要注意以下几个知识点: 1. HTML标签和语法:HTML5引入了许多新的标签和语法规则,如<header>、<footer>、<nav>等,这些标签可以更好地表示网页的结构和语义。此外,还需要熟悉HTML标签的基本用法和语法规则。 2. CSS选择器和样式:CSS用于控制网页的样式,通过选择器选中HTML元素,并为其定义样式。常用的CSS选择器有标签选择器、类选择器、ID选择器等,可以根据需要选择正确的选择器来修改对应的元素样式。 3. CSS布局:CSS可以用于实现网页的布局,通过盒模型、浮动、定位等属性可以实现各种布局效果,比如居中布局、栅格布局等。 4. 响应式设计:随着移动设备的普及,响应式设计成为了重要的一个概念。通过使用媒体查询和流式布局等技术,可以使网页在不同的设备上自适应地显示。 5. CSS动画和过渡效果:CSS3引入了许多新的动画和过渡效果,通过使用关键帧、过渡和变换等属性,可以实现各种动态效果。 需要注意的是,在使用HTML5和CSS进行网页开发时,我们需要遵循W3C制定的标准,确保网页的兼容性和可访问性。同时,也可以结合JavaScript等其他技术来增强网页的交互性和功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [HTML5CSS3知识总结(一)](https://blog.csdn.net/qq_63778549/article/details/122047919)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值