HTML与CSS总结

HTML总结

  • 什么是HTML
  • HTML和XHTML的区别
      • XHTML语法会更加严谨
      • HTML4和HTML5的区别
    • 文档结构（骨架）
  • HTML常用标签
      • 1. 注释标签
      • 2.h1- h6 标题标签
      • 3.hr水平线
      • 4.p 段落标签
      • 5.换行标签
      • 6.文本格式化标签
      • 7.div span 标签
      • 8.标签属性
      • 9.img标签
        • 相对路径
      • 10.a链接标签
        • 锚点链接
      • 11.详情和摘要标签
      • 12.列表标签
        • 1.自定义列表
        • 2.有序列表
        • 3.无序列表
      • 13.表格标签
      • 14.表单标签
          • 单选框
          • 多选框
          • 下拉菜单
  • CSS
    • css是什么
        • 作用
        • 行内样式
    • 选择器
      • 常用的选择器
        • 通配符选择器 全选
        • 标签选择器
        • 类选择器
        • id选择器
        • 样式
      • 关系选择器
        • 后代选择器
        • 儿子选择器
        • 兄弟选择器
      • 联合选择器
        • 并集选择器 联合选择器
        • 排除选择
      • 属性选择器
        • 属性（attr）选择器
      • 链接伪类选择器
      • 位置伪类选择器
      • input伪类选择器
      • 伪元素选择器
        • 字体相关的属性
        • 文本相关的设置
      • Css的层叠性
      • 显示模式
      • 变性手术
      • 溢出处理
        • overflow
        • word-break
        • white-space
      • 盒子模型
          • 外边距（margin）
            • margin重叠问题（父子）
            • margin重叠问题（兄弟）
            • margin取值问题
          • 内边距
        • 边框
          • 小三角
          • box-sizing
        • 背景图片
      • 精灵图
      • 鼠标样式
      • 居中方案
        • 水平居中
        • 垂直居中
        • vertical-align
          • 版心
      • 流式布局和浮动式布局
        • 流式布局
        • 浮动布局
      • 圣杯布局
      • 层布局
        • 相对定位（ relative）
        • 绝对定位（absolute ）
        • 固定定位（fixed ）
        • z-index属性
  • Html小案例

什么是HTML

Hyper Text Markup Language 超文本标记语言

HTML和XHTML的区别

XHTML语法会更加严谨

  1. 所有标签都必须小写
  2. 标签必须成双成对
  3. 标签顺序必须正确
  4. 所有属性都必须使用双引号
    XHTML是当前HTML版的继承者

HTML4和HTML5的区别

  1. 领域不同
  2. HTML5更强大一些

文档结构（骨架）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>标题</title></head><body></body>
</html>

HTML常用标签

1. 注释标签

快捷键：Ctrl+/

<!-- 注释语句 -->

2.h1- h6 标题标签

1）作用：

用于文章的标题

2）特性

文字加粗，文字变黑，自己占一行 h1 最大的 h6 最小的

<h1>第一观察丨天问落火，这封贺电有深意</h1>
<h2>第一观察丨天问落火，这封贺电有深意</h2>
<h3>第一观察丨天问落火，这封贺电有深意</h3>
<h4>第一观察丨天问落火，这封贺电有深意</h4>
<h5>第一观察丨天问落火，这封贺电有深意</h5>
<h6>第一观察丨天问落火，这封贺电有深意</h6>

3.hr水平线

4.p 段落标签

标签分三类：

  1. 男标签：独占一行
  2. 女标签：并排显示
  3. 人妖标签：并排显示 （img，input）

p标签的特点

  1. 是男标签（独占一行）
  2. 如果p标签中的文本，撑满了一行，会自动换行
  3. br标签 通常会和p标签配合使用 br表示换行
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><h1>重温“红色足迹” 从革命精神中汲取前行动力</h1><p>“文明因多样而交流，因交流而互鉴，因互鉴而发展。” <br /> “世界上没有两片完全相同的树
叶，也没有完全相同的历史文化和社会制度。”“多样性是世界的基本特征，也是人类文明的魅力所在。”</p><p>从联合国教科文组织总部到亚洲文明对话大会，<br/>从世界经济论坛“达沃斯议程”对话会到博鳌亚
洲论坛2021年年会，在多个重要国际场合阐述新时代中国的文明观，为深刻演变的世界带来启迪。
</p><p>俄罗斯著名汉学家塔夫罗夫斯基在亚洲文明对话大会上的演讲记忆犹新。“我怀着激动
的心情聆听了演讲，演讲的意义远远超出文化范畴，希望不同文明之间加强交流互鉴，以推动世界
和平发展。”</p><p>环顾全球，百年变局与世纪疫情交织激荡。“文明优劣论”“文明冲突论”“制度对抗论”沉渣泛起，
搞“小圈子”、组建“价值观同盟”、挑起意识形态对抗等做法令人忧心。冲突还是合作，倒退还是进步，很大程
度上取决于人们如何看待和处理不同文明之间的差异。</p>
</body>
</html>

5.换行标签

1):样式：

在这里插入图片描述
2）注意：

  1. br标签是单标签，意味着它没有结束标签，因此这是错误的：
  2. 在 HTML 中，br 标签没有结束标签
  3. 在 XHTML 中，br 标签必须被正确地关闭

6.文本格式化标签

<b></b> <strong></strong> -----文本加粗
<i></i> <em></em> -----文本以斜体方式显示
<s></s> <del></del>------中划线及删除线
<u></u> <ins></ins> -------文本以下划线方式出现

 普通版:重温的“红色足迹” 从革命精神中汲取前行动力  <hr><!-- b标签 加粗的 bold --><b>b标签版:重温“红色足迹”从革命精神中汲取前行动力</b><hr><!-- strong 加粗 --><strong>strong标签版:重温“红色足迹”从革命精神中汲取前行动力</strong><hr><!-- i标签 斜体标签 --><i>i标签版:重温“红色足迹”从革命精神中汲取前行动力</i><hr><!-- em标签 斜体标签 --><em>em标签版:重温“红色足迹”从革命精神中汲取前行动力</em><hr><!-- u标签 表示带下划线 --><u>u标签版:重温“红色足迹”从革命精神中汲取前行动力</u><hr><!-- s标签 表示中划线 --><s>s标签版:重温“红色足迹”从革命精神中汲取前行动力</s><hr><!-- del标签 表示被删除 --><del>del标签版:重温“红色足迹”从革命精神中汲取前行动力</del><hr><!-- ins标签,也是带下划线 --><ins>ins标签版:重温“红色足迹”从革命精神中汲取前行动力</ins>

7.div span 标签

1）特性

是没有语义的，网页布局中最主要的2个盒子

2）注意

  1. div 就是 division 的缩写，表示分割、分区的意思，由很多div 来组合网页
  2. span则是跨度、跨距、范围
  3. div是一个男标签 span是一个女标签

3）Tips
布局 布局是必须搭配CSS一起来的,没有CSS布局是基本不可能,很难(以前没有CSS的时候,我们通过给html加表格的属性让其定位,这种方法已经摈弃了不用了,现在都是搭配css一起布局)
当一个男标签和一个女标签在一起的时候,也是两行 男标签的优先级别＞女标签
wrapper 是包裹的意思,他现在就代表了整个网页

4）圣杯布局

 <!-- 圣杯布局 --><div class="wrapper"><!-- 起名字可以去参考一个博客 https://blog.csdn.net/qq_35038153/article/details/79971637--><!-- header start --><div class="header"><h1>这是我的header</h1></div><!-- header end --><!-- container start --><div class="container"><!-- left start --><div class="left"><h1>left</h1></div><!-- left end --><!-- main start --><div class="main"><h1>main</h1></div><!-- main end --><!-- right start --><div class="right"><h1>right</h1></div><!-- right end --></div><!-- container end --><!-- footer start --><div class="footer"><h1>我的底部<span>是</span>footer</h1></div><!-- footer end --><!-- span是一个女标签 --><!-- div是男标签 --></div>

** clear: both;**

         /* 清除上面浮动元素带来的影响 */clear: both;

8.标签属性

  1. title=“haha” 叫标签的属性 不同的属性含义是不一样的
  2. class=“box” 就是给h1在起一个名字 id=“item” 就是给他一个身份证号
  3. class是可以重复的 但是id是不能重复的
  4. id的值和上面h1里面的id的值重复了 这样写是不允许的
  5. id="item1"这样写的完全没问题的,因为你的item1也是唯一的
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><!-- title="haha" 叫标签的属性 不同的属性含义是不一样的 --><!-- class="box" 就是给h1在起一个名字  id="item" 就是给他一个身份证号 --><!-- class是可以重复的  但是id是不能重复的 --><h1 title="haha" class="box" id="item">我是一个h1标签</h1><h1 class="box">这又是一个h1标签</h1><p class="box">我是一个名字为box的P标签</p><!-- id的值和上面h1里面的id的值重复了 这样写是不允许的 --><div id="item"></div><!-- id="item1"这样写的完全没问题的,因为你的item1也是唯一的 --><span id="item1"></span>
</body>

9.img标签

  1. img是为数不多的一个人妖标签

    <img src="./img/001.jpg" alt="你的图片炸了">

  2. ./表示寻找当前目录 谁的当前:就是13-img标签的使用这个文件的当前目录

  3. img是image的缩写,src是source的缩写,source是源的意思,src中写图片的路径 地址

  4. alt表示当你图片的路径出问题的时候,也就是说图片找不到的时候 显示alt中的内容

  5. src中写线上地址能否加载 能加载 前提是你有网络
    常用属性

  1. src 图像的路径
  1. alt 图像不能显示时的替换文本，并且alt属性有利于SEO
  2. title 当鼠标悬停的时候，显示的内容
  3. width height 设置图像的宽度和高度 widht=“100px” 其中px可以不写 了解 因为通常
    是通过CSS来设置的
  4. border 设置图像边框的宽度 了解 因为通常是通过CSS来设置的

相对路径

  1. 同级目录下 直接./+文件名 就可以寻找到 更推荐这种,同级目录下 直接文件名也可以寻找到
  2. 通过/进入下一级目录
  3. 图像文件位于HTML文件的上一级文件夹
    出屋 出去这个当前文件夹 …/就是进入到上一级目录,也就是我们所谓的出屋这个动作

10.a链接标签

    a标签：超链接标签 点一下会跳转到新的页面

a标签是一个 女标签
href属性代表我们要链接的资源
属性值为他的地址
标签包裹的内容就是我们点击的那一片文字
target属性：（target有目标的意思）
1._self 在当前选项卡跳转
2._blank 打开一个新的选项卡

     <a href="http://www.baidu.com">百度一下 默认版</a><!-- 默认的是 在当前选项卡跳转 --><a href="http://www.baidu.com" target="_self">百度一下 _self版</a><!-- _self版也是在本地跳转 --><a href="http://www.baidu.com" target="_blank">百度一下 _blank版</a><!-- _blank版是打开一个新的选项卡 --><a href="#">这是一个空链接</a><!-- #是一个锚点链接 -->

锚点链接

步骤
1. 使用链接文本 创建链接文本
2. 使用相应的id名标注跳转目标的位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>锚点链接</title>
</head>
<body><h2>目录</h2><a href="#znjingli">早年经历</a><a href="#yyjingli">演艺经历</a><a href="#left_style">个人生活</a><a href="">主要作品</a><a href="">社会活动</a><a href="">获奖记录</a><a href="">人物评价</a><h3 id="znjingli">早年经历</h3><hr><div><p>刘德华出生于香港新界，在家中排行老四，幼时随家人搬到了九龙钻石山的木屋区居住，并和姐弟一起帮助家里打理卖稀饭的生意 [24]  。1973年，刘德华随家人搬入香港蓝田邨第15座14楼 [25]  。刘德华从黄大仙天主教小学毕业后升读可立中学 [26]  。在可立中学读书期间，刘德华积极参加校内学校剧社的表演，在老师杜国威的指导下学习戏剧方面的知识。此外，他还参与包括编剧在内的幕后制作。刘德华在中五会考获得1B3D2E（中文读本A）的成绩。中六上学期后，他到香港电视广播有限公司的艺员训练班受训，从而开始了演艺之路 [27]  。</p><img src="./img/ldh.png" alt="你的明星找不到了" title="刘德华"></div><hr><h3 id="yyjingli">演艺经历</h3><hr><div><p>1981年，刘德华考进第10期无线电视艺员训练班 [28]  。同年，出演个人首部电视剧《江湖再见》，在剧中饰演以贩卖妇女为生的小混混阿龙；该剧获得美国电视节电视剧特别奖 [29]  。</p><p>1982年，刘德华以甲级成绩从艺员训练班毕业后正式签约TVB [30]  。同年在喜剧《花艇小英雄》中饰演败家仔钱日添。12月，与叶德娴搭档主演时装警匪剧《猎鹰》，凭借卧底警察江大伟一角获得关注 [31]  。</p><p>1983年，主演金庸武侠剧《神雕侠侣》，在剧中饰演外貌俊俏、倜傥不羁的杨过 [32]  ；该剧在香港播出后取得62点的收视纪录。同年，与黄日华、梁朝伟、苗侨伟、汤镇业组成“无线五虎将” [33]  。</p><p>1984年，与赵雅芝合作主演古装武侠剧《魔域桃源》，在剧中饰演资质出众、武功高强的傅青云 [34]  。同年，与梁朝伟共同主演金庸武侠剧《鹿鼎记》，在剧中饰演英明果断的康熙 [35]  。</p><p>1985年，在古装武侠剧《杨家将》中饰演骁勇善战的杨六郎 [36]  。同年，TVB向刘德华提出加签五年的合约，刘德华因拒绝而被TVB雪藏400天 [37-38]  。</p><p>1986年，在邵逸夫的调解下，刘德华与TVB和解并签下合约。同年，主演古装剧《真命天子》</p><p>1988年，在出演了武侠剧《天狼劫》后，刘德华将演艺事业的重心转向影坛 [38]  。</p></div><hr><h3 id="left_style">个人生活</h3><hr><div><p>家庭刘德华的父亲刘礼在启德机场做过消防员的工作。20世纪60年代，刘礼开了一间小吃杂货店以赚钱维持家用。刘德华在家中还有三位姐姐，一位妹妹以及一位弟弟（刘德盛）。</p><p>感情1986年，刘德华随香港明星足球队赴吉隆坡时，结识了朱丽倩。2008年6月23日，刘德华与朱丽倩在美国拉斯维加斯注册结婚 [196]  。2012年5月9日，刘德华的妻子朱丽倩生下一个女儿。 [197-198] </p><p>学历2006年7月，香港演艺学院第20届毕业典礼上，刘德华获颁香港演艺学院荣誉院士。 [200] </p>    </div>
</body>
</html>

11.详情和摘要标签

1）details
2）summary
3）注意

目前只有谷歌浏览器和Safari浏览器支持

12.列表标签

1.自定义列表

       dl+dt+dd列表一定是包裹的形式dl是男标签dt是男标签dd是男标签

     <h2>自定义列表的使用</h2><dl><dt>文科</dt><dd>政治</dd><dd>历史</dd><dd>地理</dd><dt>理科</dt><dd>物理</dd><dd>化学</dd><dd>生物</dd></dl><dl><dt>文科</dt><dd>政治</dd><dd>历史</dd><dd>地理</dd><dt>理科</dt><dd>物理</dd><dd>化学</dd><dd>生物</dd></dl>

dl一包裹 那么就告诉浏览器 你这个里面是一个自定义列表
加粗样式

2.有序列表

有序列表是ol+li
在ol中有一个属性值叫type 取值有:1,a,A,i,I
默认的是数字
ol是男标签
li是男标签

     <ol><li>江苏新增本土病例1例</li><li>多地降雨量破历史极值</li><li>"板蓝根大王"徐镜人逝世</li><li>台湾学者邱毅在厦门接种科兴疫苗</li></ol><ol><li>江苏新增本土病例1例</li><li>多地降雨量破历史极值</li><li>"板蓝根大王"徐镜人逝世</li><li>台湾学者邱毅在厦门接种科兴疫苗</li></ol>

3.无序列表

ul+li
ul是男标签
li是男标签

 <ul style="list-style: none;"><li>逆天邪神</li><li>万古神帝</li><li>武炼巅峰</li><li>伏天氏</li><li>剑来</li><li>大奉打更人</li></ul><ul style="list-style: none;"><li>逆天邪神</li><li>万古神帝</li><li>武炼巅峰</li><li>伏天氏</li><li>剑来</li><li>大奉打更人</li></ul>

13.表格标签

表格的标签 table
行标签 tr row 行
th 表头 td 每一个表格
th自带一个内容居中的属性

cellspace 是单元格之间的间隙
align 有位置的意思 center 居中

单元格合并 让我们的某个格子跨行 或者 跨列
rowspan就表示跨行 后面的数字表示跨几行
colspan表示跨列 后面的数字表示跨几列

14.表单标签

form是表单标签，其中有以下属性
action表示收集完数据后，将数据提交的服务器地址
method表示以什么样的方式提交给服务器 GET的话就是GET请求
name=“表单名称”
你只有这个表单，需要在表单中放入表单项，也就是表单控件

Tips

人妖标签 1.img 2.input
label标签 他会绑定input 帮助我们获取焦点

input标签中的属性：
1.type 类型
2.placeholder 提示语

type类型为text 表示一个普通的文本框
type类型为password 表示一个密码
** type类型为number 表示一个数字输入框**

单选框

radio 收单机的意思 那么在这里表示单选
必须要求同一类型的单选选项name名相同
有checked 会被默认选中

多选框
**checkbox**
下拉菜单

下拉菜单 select+option使用(切记)

下拉菜单 select+option使用(切记)

Tips

textarea标签 表示文本区域

CSS

css是什么

Cascading Style Sheets
层叠样式表
层叠性：CSS的层叠性，是CSS特性之，至于什么是层叠性，后面再说
样式：对网页进行布局和美化，样式分两类，一类是布局用，一类的是美化用的
表：表里面放的CSS属性，学习CSS主要学习CSS中的一堆的属性，大概有160个左右，我们需要掌握的不多，
25个左右。

我是一个h1标签

title="haha"是html中的属性。css中的属性和html中 的属性不是一回事

作用

1.更有组织的美化网页
a)语义和样式分离
b)更好维护和复用
2.可以尝试删除别人网站中的css, 看下效果
作用：A）布局 B）美化

行内样式

行内样式
1.优先级别最高(除了!important)
2.他是写在每一个标签中的样式 是一个属性
3.他的属性名叫style

Tips

  letter-spacing: 10px;/* letter 单词 spacing 间隙 字间距10px */text-shadow:5px 5px 2px gray ;/* 字体阴影 */

选择器

常用的选择器

通配符选择器 全选

*{} 通配符选择器 全选

这种选择器常用于清除内外边距
*{
margin:0;
padding:0;
}

标签选择器

直接标签名{} 前面什么都不要加

类选择器

.类名{} 切记前面是.
类名是什么：类名是class后面的属性值

id选择器

#id名{} id名是属性id的属性值

样式

1.行内样式
2.页内样式
3.外部样式

关系选择器

后代选择器

它不仅仅是选中儿子 而是选中当前这个标签包裹住所有我们选中类名的标签
.father .son

 .father .son{color: skyblue;}.father .grandson{color: red;}

  <h2>后代选择器</h2><div class="father">这是爸爸<div class="son">这是儿子<div class="grandson">这是孙子</div></div><div class="grandson">这是个异类</div></div>

儿子选择器

.father>.son 中间用>连接

 .father1>.son1{color: skyblue;}.father1>.grandson1{color: red;}

 <h2>儿子选择器</h2><div class="father1">这是father<div class="son1">这是son<div class="grandson1">这是grandson</div></div><div class="grandson1">这是异类</div></div>

兄弟选择器

选中的是某个元素后面紧挨着的那个元素
div+p{} 表示选中div后面紧挨的p标签

   div+p{color: skyblue;}div+span{color: tomato;}span+p{color: yellow;}
 <h2>兄弟选择器</h2><div>这是div （这是大哥）</div><p> 这是p标签(这是二哥)</p><span> 这是span标签(这是三哥)</span><p>这是p标签 (这是四哥)</p>

选中后面N个兄弟

   .brother~p{color: red;}

2>这是选中后面N个兄弟</h2><div class="brother">这是大哥</div><p>这是小弟</p><p>这是小弟</p><span>这是小小弟</span><p>这是小弟</p><p>这是小弟</p><p>这是小弟</p><p>这是小弟</p>

联合选择器

并集选择器 联合选择器

.box1,.box2{
color: violet;

div,p,span{
color: red;

div,.box2{
color: red;

.box1,span,ul li{
color: turquoise;

排除选择

:not(.other)表示排除类名为other

<body><div class="box1">这是box1</div><p class="box2">这是box2</p><div class="box3">这是box3</div><span class="box4">这是box4</span><ul><li>这是第一个li</li><li>这是第二个li</li><li class="other">这是第三个li</li></ul>
</body>

属性选择器

属性（attr）选择器

[id]{
color: violet;

[id]当为这样的时候，表示有id属性即可

[id][class]{
color: yellow;

[id][class]表示id和class属性都必须有
[id],[class]这样表示 id和class有一个即可

[id=“box1”]{
color: red;

[id=“box1”] 表示选中id这个属性 属性值为box1的元素
我们直接指定了id 或者说指定属性值

[id^=“box”]{
color: red;

id^=box 表示id属性值以box开头的 (正则表达式)

[id$=“1”]{
color: red;

** id$=“1” 表示id属性值是以1结尾的元素**

** [id*=“o”]{
color: yellow;**

** id*="o"表示id属性值中有o的元素**

[class~=“item2”]{color: red;}

** 使用class一次性起了多个名字 使用~=可以使用其中一个名字**

链接伪类选择器

** 类 class 伪类：不存在这样一个类**
** a:link{} :link就是一个伪类 但是你页面里有没有class=“link”**
a:link{} 普通状态下的 没有被点击的时候的样子

.a1:visited{} 表示点击后的样式
:link和:visited 可能存在一些兼容性问题
:hover表示我们鼠标移上去时候的颜色 去摸的时候的颜色 这个用的很多
:active表示点击按压后的颜色
target目标 :target表示当我们跳转到锚点后锚点的样式

位置伪类选择器

div:nth-child(1){
color: red;

和div同级的第一个元素如果是div的话就标红

div:nth-child(odd){
color: red;

:nth-child(odd) odd有三个字母 所以odd代表的奇数

div:nth-child(even){
color: red;

:nth-child(even) even有四个字母 所以even代表的是偶数

p:nth-child(even){
color: yellow;

表示和p标签同级的 是偶数的p标签的元素

** p:nth-child(2n){
color: yellow;**

:nth-child(2n) n取之是从0开始 2n表示偶数, 和even一样

span:nth-child(2n+1){
color: violet;

2n+1就表示奇数

ul li:last-child{
color: red；}

:last-child 表示当前级别最后一个元素
:first-child表示当前级别第一个元素

div:nth-of-type(1){
color: red;

他表示的是每一级别中第一个div

input伪类选择器

:focus 表示聚焦后的状态

  /* 禁用后状态 */input:disabled{background: skyblue;}/* 表示输入框被禁用后 背景颜色变成了天空蓝 */

  /* 可输入时候的样式 */input:enabled{background: gold;}/* 表示正常情况下的样式 */

disabled 表示禁用当前输入框

伪元素选择器

选中第一个字
p::first-letter{
color: red;
font-size: 60px;
———————————————————–
选中第一行
p::first-line{
background: skyblue;
选中我们P标签的第一行 让第一行为天空蓝

p::selection{
background-color: slateblue;
color: red;
选中文本

display就是用来指定性别的 block就是男

  .father::after{content: "这是father的后面";display: block;color: red;}

content 内容 你只要用::after 或者::before 都需要写上content
::after就是挂在到我们元素身后的一个伪元素 伪元素不会再html代码里面展示
其呈现在页面上的内容 是其属性content中的属性值

::before 就是挂到我们选中的元素之前，内容也是写在content里面

字体相关的属性

  1. 字体大小的设置 font-size
    1.1 属性值为百分比的时候 其对比是他父级 的字体大小
    1.2 属性值为单词的 其每个单词有固定的px大小
    1.3 一个字 最小是12px

  2. 设置字体是否倾斜 font-style
    2.1 属性值为normal的时候 表示正常
    2.2 属性值为italic的时候 表示倾斜

  3. 设置字体粗细 font-weight
    3.1 属性值为normal的时候 表示正常
    3.2 属性值为bold和bolder的时候 都表示加粗
    3.3 属性值大于400的时候 是加粗 400是正常 小于400是变细

  4. 设置字体的格式 font-family

  5. 设置字体颜色 color
    5.1 颜色表示方式
    5.1.1 color: yellow;
    5.1.2 color: #FFC0CB;
    5.1.3 颜色的第三种表示方法 rgb表示法
    5.1.4 切记 如果你想调整颜色的是a标签 一定要选到他的头上

<body><h1>1.设置字体大小 font-size</h1><p class="box1">Hello css</p><p class="box2">Hello css</p><p class="box3">Hello css</p><hr><h1>2.设置字体是否倾斜 font-style</h1><p class="box4">Hello css</p><p class="box5">Hello css</p><hr><h1>3.设置字体粗细 font-weight</h1><p class="box6">Hello css</p><p class="box7">Hello css</p><p class="box8">Hello css</p><hr><h1>4.设置字体的格式（字体） font-family</h1><p class="box9">Hello css</p><p class="box10">Hello css</p><hr><h1>5.设置字体颜色 color</h1><p class="box11">Hello css</p><p class="box12">Hello css</p><div class="box13"><a href="">Hello css</a></div>
</body>

文本相关的设置

text-decoration: underline;
/* 表示下划线 */

text-decoration: overline;
/* 表示上划线 */
}

text-decoration: line-through;
/* 表示中划线 */

表示文本的位置
text-align: left;
text-align: center;
text-align: right;

设置文本首行缩进

text-indent: 2em;
/* em表示当前段落一个字的大小 所以1em就表示一个字大 如果一个字是20px 那么1em=20px */

.box8{background: url("./images/logo.png");width: 200px;height: 100px;text-indent: -9999em;/* 这样的话 你的这个字看不到了 *//* 更有利于我们后期的SEO优化 */}

设置行高line-height

    .box9{line-height: 100px;/* 设置的是一行的高度 */}

文字肯定在这一行的中间
让line-height的行高等于外面你想让他所在盒子的高度

margin: 0;padding: 0;line-height: 80px;

设置文字间距 letter-spacing word-spacing

word-spacing表示的是单词之间的间距

rgba最后一个参数表示的是 透明度
0.5表示半透明 0表示全透明 1表示不透明

**background-color:gold transparent ;
transparent表示完全透明
background: pink;
opacity: 0.5;
opcity也是透明度
和rgba的区别在于能不能继承
rgba是不会继承的
opcity会继承 **

设置文字突起 text-shadow

text-shadow: -1px -1px 2px #fff,1px 1px 2px #000;

文字凹陷

text-shadow: 1px 1px 2px #fff,-1px -1px 2px #000;

Css的层叠性

<style>.box1{color: red;}.box2{color: green;}</style>
</head>
<body><div class="box1 box2">我的小名有box1 box2</div>

这个红色是否起作用
1.红色起作用了
2.代码 从上往下 从左往右执行 走到元素这里 加载这个元素 首先加载的是box1 然后加载的是box2
你这个box1 和 box2同时作用于一个元素了 后面的样式盖在了前面这个样式的上面
3.这种就叫我们的层叠性 其实就是一层一层覆盖 我们看到的是盖在最上面的(同种类型的选择器)

选择器的优先级别 ID选择器>类选择器>标签选择器>通配符选择器

在同一位置的情况下 ID选择器>类选择器>标签选择器>通配符选择器

行内样式的优先级别>页内样式的优先级别>外部样式的优先级别

距离标签越近 优先级别越高 近水楼台先得月

当选择器是复合的时候，我们通过权重来判定优先级别
认为id选择器权重为 100
类选择器权重为 10
标签选择器权重为 1
加起来 权重最大的 就是优先级别最高的
当权重相同的时候 谁在后面 谁优先级别高

       .box .P1 .S1{color: red;/* 30 */}div p span{color: skyblue;/* 3 */}#box1 #p1 #s1{color: springgreen;/* 300 */}div .P1 .S1{color: yellow;/* 21 */}div #p1 #s1{color: teal;/* 201 */}div #p1 .S1{color: violet;/* 111 */}div .P1 #s1{color: tomato;/* 111 */}

可以理解为 !important权重为无限大

 .box{color: turquoise !important;}

显示模式

男女标签的区别(行内元素和块级元素的区别)
1.块级元素独占一行 行内元素可以和其他行内元素以及行内块元素共处一行
需要注意的是 行内元素不能和块级元素共处一行
2.行内元素不能设定宽高 其宽高是内容撑起来的高度
块级元素可以设定宽高 如果没有设定 则其默认宽度为父级100%

出现了一个需求 就是我又想让一个元素能设定宽高 又想让他们共处一行
1.用人妖标签
2.浮动

人妖标签 img input
1.它可以设定宽高
2.它可以共处一行

变性手术

变性手术使用的属性 叫 display
当属性值为inline的时候 表示 行内元素 也就是女标签

当属性值为block得时候 表示块级元素 也就是男标签
当你变成男标签之后 就可以设定宽高了

当属性值为inline-block的时候 就是人妖标签 行内块元素

溢出处理

overflow

overflow属性 处理超出部分
属性

当属性值为hidden 表示 超出部分隐藏
overflow: visible;
visible就是不隐藏 看得见 当我们什么都不写的时候 默认的就是visible
overflow: scroll;
当属性值为scroll的时候 就表示卷起来 就是出现滚动条
overflow: auto;
这个auto在不同场合的时候 意思不太一样 所以说 尽量不用

当属性值为inherit的时候 就表示继承父级的overflow的属性值

当我们子元素的内容 大于父元素的区域大小时 ，就出现了元素溢出的情况

word-break

word-break:

当属性值为normal是遵循浏览器的默认规则 当我们什么都不写的时候 就是normal

当属性值为keep-all的时候是报证单词的完整性

当属性值为break-all的时候 报证优先填满一行 填不满强行打断

当属性值为break-word的时候是报证单词的完整性

white-space

wrap有换行的意思 nowrap 不换行

当属性值为nowrap的时候 就算我这一行的内容超出了 我也不换行

overflow hidden可以和white-space搭配使用

盒子模型

最小宽 最小高 min-width: 1200px; min-height: 500px;
min-width叫最小宽
min-height叫最小高 min-width就是给一个最小宽 不论我们浏览器的窗口怎么拉 他都不会小于最小宽
max-width: 1400px; max-width就表示的最大宽

外边距（margin）

margin: 30px;： 就表示上下左右都是30px的外边距 但是由于只有一个元素的时候

margin就是外边距的属性名 属性值和padding一样
margin: 50px 100px 20px 10px;
一个参数表示四个方向都是50px
两个参数 50px表示的上下 100px表示的是左右

margin重叠问题（父子）

垂直方向上 父子盒子高度合并问题
解决方案：
1.给父级加一个边框 这种方法有时候不适用
2.给父级加overflow:hidden 我们的一种小偏方 她不单单可以解决这个高度合并问题 也可以去解决浮动带来的一些问题
3.你可以给父级加一个上面的内边距 但是会让盒子大一点点
4.BFC

margin重叠问题（兄弟）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>兄弟之间的合并问题</title><style>.box{width: 200px;height: 200px;background: turquoise;margin-bottom: 50px;}.box1{width: 200px;height: 200px;background: rgb(4, 35, 32);}</style>
</head>
<body><div class="box"></div><div class="box1"></div><!-- 所以说目前这个没有合适的解决方案  我们通常只给其中一个写就可以了 -->
</body>
</html>
margin取值问题

因为很多标签 他都有自带的一些样式 为了避免我们写页面过程中这个样式对我们
的影响 我们通常会在最开始对其进行默认样式的重置
我们这种是最简单粗暴的

margin: 0 auto
auto的值 表示的是尽可能大

女标签只能适用左右的margin 不能适用上下

内边距

padding:30px;

写一次参数 表示上下左右的内边距都是50px
padding: 50px;
当为两个参数的时候 分别代表什么 50px是上下的内边距 20px是左右的内边距
padding: 50px 20px;
当有三个参数的时候 上 左右 下
padding: 50px 20px 10px;
当有四个参数的时候 上 右 下 左
padding: 50px 40px 30px 20px;

边框

边框 属性名为 border boder是一个复合属性 其属性值 有多个含义
border: 20px solid red
第一个属性值为边框粗细 第二个属性值为边框的样式 第三个属性值为边框的颜色

小三角
width: 0;height: 0;border-top: 20px solid red;border-left: 20px solid rgba(141, 255, 120, 0);border-bottom: 20px solid rgba(142, 0, 0, 0);border-right: 20px solid rgba(145, 70, 57,0);
box-sizing
 .box{width: 100px;height: 100px;padding: 50px;border: 10px solid red;

在以上情况下 实际的占地高 内容高 也就是width的值+2*padding(上下的内边距)+上下的边框

box-sizing:border-box;
他的作用就是 让你的width 和 height变成内部区域的高和宽

背景图片

背景图 background-image

背景图的大小 background-size
background-size: 500px 500px;这表示宽500px 高500px
如果是百分比的话 那么就是你这个盒子的宽高*百分比

background-size: cover
cover就是让我们图片按原本的比例进行方法或者缩小,直到全部填满盒子为止,可能会有一部分超出 因为我们图片的横纵比和我们盒子的横纵比不一定相同

background-size: contain;
cover 是将盒子完全填满,但是图片不一定完全显示
contain 就是将图片完全显示,但是盒子不一定填满
因为他们两个都是对图片进行等比例缩放

background-repeat表示是否平铺
no-repeat就表示不平铺
repeat-y就表示y轴方向平铺 X不平铺
repeat-x就表示x轴方向平铺 Y不平铺

position有位置的意思
background-position就是背景的位置

background: url(’./imgs/01.jpg’) no-repeat center center;
如果是图片则需要加上url(地址)
第二个参数 表示是否平铺
第三个参数 表示位置

精灵图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>精灵图的使用</title><style>/* 类名以icon开头的元素 */[class^="icon-"]{background: url(./images/sn.png);}.icon-one{width: 80px;height: 80px;background-position: -770px 0px;}.icon-two{width: 80px;height: 25px;background-position:-670px -164px;}</style>
</head>
<body><div class="icon-one"></div><div class="icon-two"></div><!-- 这两个用的背景图是一样的 但是由于我们这两个盒子大小设置不一样，且背景图起始坐标不一样 ，所以展示出来的也不一样 -->
</body>
</html>

鼠标样式

控制鼠标样式的属性 cursor
cursor: pointer; point版本 小手版
== cursor: move;== move 移动版

居中方案

水平居中

text-align ：center;
1.可以使文本内容居中
2.他不能使块级元素在父级居中
3.可以使其子级中女标签居中
4.可以让其子级中行内块元素居中

margin:0 auto
想让男标签居中 就用margin

垂直居中

position: relative; 坐标原点
position: absolute; position: absolute;
在父级上写上position:relative 然后在需要居中的子级上下position:absolute

line-height是一行的行高

vertical-align

top middle bottom
vertical-align表示的竖直方向上在父级中的位置
当属性值为top的时候 对准的是行顶
当属性值为middle的时候 对准的是中线
当属性值为bottom的时候 对准的是行底
在这里插入图片描述

版心
        .container{width: 1000px;border: 1px solid red;margin: 0 auto;height: 100%;font-size: 0;}

流式布局和浮动式布局

流式布局

流式布局

其实就是什么都不加的时候的布局 就像流水 就像你写作业
从上往下 从左往右 一行满了换一行 男标签 独占一行 女标签可以和其他女标签和人妖标签并排

浮动布局

浮动布局布局

浮动的作用 让块级元素浮动起来 可以并排显示 一排填满换另一排
浮动属性 float
值为left的时候 是左浮动
值为right的时候 是右浮动

浮动带来的影响

块级元素的高度 如果不写的话 是内容撑起来的

浮动带来的影响 主要分两方面
1.对兄弟元素带来的影响
2.对父级元素带来的影响

对父级的影响
高度塌陷问题 如何理解高度塌陷
子元素一旦浮动 就半脱离标准文档流 导致父元素没有内容 所以高度塌陷了

解决方案1
1)加高法 直接给父元素加一个高
2)overflow:hidden; 本意是 处理超出部分 超出部分隐藏

浮动带来的影响（兄弟）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮动带来的影响(兄弟篇)</title><!-- 为什么说浮动式半脱离标准文档流 --><!-- 解决兄弟浮动带来的影响 --><!-- 1.--><style>.father{width: 1000px;height: 700px;border: 1px solid red;margin: 0 auto;}.son1{width: 300px;height: 300px;background: skyblue;float: left;}.son2{width: 300px;height: 300px;background: springgreen;}</style>
</head>
<body><div class="father"><div class="son1"></div><div style="clear: both;"></div><div class="son2"></div></div>
</body>

圣杯布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>圣杯布局</title><style>.main{width: 1000px;height: 500px;border: 1px solid red;margin:0 auto;}.header{width: 100%;height: 100px;background: lightblue;}.container{width: 100%;height: 300px;}.container .left{width:300px;height: 300px;float: left;background: lightcoral;}.container .center{width: 400px;height: 300px;float: left;background: lightsalmon;}.container .right{width: 300px;height: 300px;float: left;background: lightseagreen;}.footer{width: 100%;height: 100px;background: lightslategray;}</style>
</head>
<body><div class="main"><div class="header"></div><div class="container"><div class="left"></div><div class="center"></div><div class="right"></div></div><div class="footer"></div></div>
</body>
</html>

层布局

相对定位（ relative）

实际上定位有三种
相对定位 绝对定位 固定定位
定位的属性是 position
relative absolute fixed

1)相对定位是不会脱离标准文档流的,他原本的位置还是被自己占着,别人是不能占用
2)不管一个盒子 之前是什么性别 相对定位后 还是什么性别 性别是不会改变的
3)一般情况下,我们一般都要通过使用left,top,right,bottom来设置偏移量 ,但是 position:relative这一行代码除了表示相对定位外 还有其他含义
4)相对定位的应用场景,一般是用到对一个元素的位置进行微调

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>相对定位</title><style>.father{margin: 0 auto;width: 700px ;height: 700px;border: 1px solid red;}.son{margin: 100px auto;width: 200px;height: 200px;background: lime;position: relative;margin-top: 200px;/* 当你只有一个相对定位的时候 坐标轴是谁*//* 其坐标原点是其原来的位置 */}/* 实际上定位有三种 相对定位 绝对定位 固定定位  定位的属性是 position relative absolute fixed*//* 1)相对定位是不会脱离标准文档流的,他原本的位置还是被自己占着,别人是不能占用2)不管一个盒子 之前是什么性别  相对定位后 还是什么性别 性别是不会改变的3)一般情况下,我们一般都要通过使用left,top,right,bottom来设置偏移量 ,但是 position:relative这一行代码除了表示相对定位外 还有其他含义4)相对定位的应用场景,一般是用到对一个元素的位置进行微调*/</style>
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

绝对定位（absolute ）

当只有absolute的时候 其坐标原点是 body

当只有absolute的时候 其坐标原点是 body

注意的问题:
1.绝对定位的元素 会完全脱离标准文档流
2.一般情况下 我们会把参考点设置为父级元素 父相子绝
3.一个女标签绝对定位后 就变成了男标签
4.margin照样可以调整位置

固定定位（fixed ）

1.固定定位 没有参考点,就以body为参考点
2.固定定位也可以和margin同时使用
3.一般情况下 这种小广告 需要用到固定定位的东西 一般都是写在body的下一级

z-index属性

z-index属性它的作用 就是显示的优先级别 正常情况下 大家的级别都是0 也就是说
谁后覆盖 你看到的就是谁
我们可以通过z-index去处理这个级别

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>z-index</title><style>.father{width: 500px;height: 500px;border: 1px solid red;position: relative;}.son1 ,.son2,.son3{position: absolute;top: 0;left: 0;width: 100px;height: 100px;}.son1{background: #c5c5c6;}.son2{background: #e40202;z-index: 999;}.son3{background: yellow;}/* z-index属性它的作用 就是显示的优先级别 正常情况下 大家的级别都是0 也就是说 *//* 谁后覆盖 你看到的就是谁 *//* 我们可以通过z-index去处理这个级别 */</style>
</head>
<body><div class="father"><div class="son1"></div><div class="son2"></div><div class="son3"></div></div>
</body>
</html>

Html小案例

电影列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>新闻列表</title><style>*{margin: 0;padding: 0;}ol{list-style-type: none;}.movie{width: 245px;margin: 50px auto;}.movie li{border-bottom: 1px solid #ededed;padding: 7px 0;}.movie li strong{display: inline-block;width: 20px;height: 16px;line-height: 16px;text-align: center;color: #fff;background:url("./imgs/hot_list\ \(1\).png") no-repeat -150px -32px;}.movie li em{display: inline-block;width: 20px;height: 16px;line-height: 16px;text-align: center;color: #292929;font-style: normal;border: 1px solid #292929;}.movie li a{margin: 0 10px;text-decoration: none;color: #424242;}.movie li span{font-size: 12px;color: #888;}.movie .up,.movie .down{float: right;padding-right: 10px;}.movie .up{background: url("./imgs/up.png") no-repeat right center;}.movie .down{background: url("./imgs/down.png") no-repeat right center;}</style>
</head>
<body><div class="movie"><ol><li><strong>1</strong><a href="">狼少年</a><span>720P</span><span class="up">34,647</span></li><li><strong>2</strong><a href="">暴力街区</a><span>720P</span><span class="up">28,323</span></li><li><strong>3</strong><a href="">澳门风云</a><span>720P</span><span class="up">25,363</span></li><li><em>4</em><a href="">新人肉叉烧包</a><span>720P</span><span class="up">20,270</span></li><li><em>5</em><a href="">京城81号</a><span>720P</span><span class="up">20,270</span></li><li><em>6</em><a href="">人间中毒</a><span>720P</span><span class="down">20,270</span></li><li><em>7</em><a href="">飞驰人生</a><span>720P</span><span class="down">20,270</span></li><li><em>8</em><a href="">僵尸复活</a><span>720P</span><span class="up">20,270</span></li><li><em>9</em><a href="">V字仇杀队</a><span>720P</span><span class="up">20,270</span></li><li><em>10</em><a href="">全职杀手</a><span>720P</span><span class="up">20,270</span></li></ol></div>
</body>
</html>

美化表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表单练习</title><style>*{margin: 0;padding: 0;}ul{list-style: none;}body{font-size: 14px;color: #333;}form{width: 350px;padding: 15px;margin: 50px auto;border: 1px solid #eee;}form li{padding: 10px ;}form .txt{padding: 3px 5px;height: 19px;width: 230px;}form .lbl{display: inline-block;width: 80px;text-align: right;}form .btn{width: 170px;height: 36px;line-height: 36px;text-align: center;background: skyblue;color: #fff;font-size: 16px;font-weight: bold;}</style>
</head>
<body><form action=""><ul><li><label for="email" class="lbl">电子邮箱：</label><input type="text" name="" id="email" class="txt"></li><li><label for="pwd" class="lbl">创建密码：</label><input type="password" name="" id="pwd" class="txt"></li><li><label for="pwd" class="lbl">确认密码：</label><input type="password" name="" id="pwd" class="txt"></li><li><label for="sex" class="lbl">性别：</label><input type="radio" name="sex" checked value="man">男<input type="radio" name="sex" value="woman">女</li><li><label for="" class="lbl">生日：</label><select><option value="">请选择</option><option value="">1990</option><option value="">1991</option><option value="">1992</option></select>年<select><option value="">--</option><option value="">01</option><option value="">02</option><option value="">03</option></select>月<select><option value="">--</option><option value="">01</option><option value="">02</option><option value="">03</option></select>日</li><li><label for="" class="lbl">我现在：</label><input type="radio" name="status" id="" checked>在工作<input type="radio" name="status" id="">在上学<input type="radio" name="status" id="">其他</li><li><label for="" class="lbl"></label><input type="checkbox" name="status" id="agree" checked><label for="">同意</label><a href="">开心网条款</a></li><li><label for="" class="lbl"></label><input type="submit" value="立即注册" class="btn"></li></ul></form>
</body>
</html>

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注