HTML与CSS学习
这是博客摘录，我今天学的内容基本上里面都已经概括好了，所以摘录到博客，记录下来，进行了一些调整补充，自己的练习心得在后面
CSS
简介
什么是CSS?
层叠样式表：Cascading Style Sheet
什么作用?
html是网页的骨架，而CSS就是对骨架内容的修饰
为什么要使用？
样式和内容写在一起会显得非常臃肿，使用css可以单独的将样式抽离出来，可以提高开发效率
CSS提供了很多HTML无法完成的显示效果
抽离出来的CSS可以单独加载，能够实现多个页面的共享，节约网站的带宽，就是节约成本。
CSS引入方式
方式1：行内样式表
通过标签的style属性设置
方式2：内联样式表
通过style标签实现
方式3：外联样式表
通过link标签引入外部css文件
说明：
当设置的属性非常少，需要设置的标签也非常少(只有一处)，可以使用行内样式
当一个网页的内部，很多标签都需要使用同样的显示效果，可以是内联样式
当一个网站的多个页面需要使用同样的显示效果，可以将相同样式单独放在css文件中，即外联样式
CSS语法特点
样式必须写在{}中
所有的样式都是以键值对的形式出现的
样式与值之间通过':'进行连接
每个属性的结尾使用分号，最好一行一个属性
注释使用：/* 注释 */
CSS文件中不需要使用style标签
常用选择器
标签选择器：通过标签的名字进行选择
class选择器：通过标签的class属性名进行选择，选择时使用'.'
id选择器：通过标签的id属性名进行选择，选择时使用'#'
组合选择器：可以将其他选择器选择的多个元素进行统一设置，多种选择通过','隔开
层级选择器：通过一层一层进行指定和选择，确定指定的元素，层级之间使用空格隔开
属性选择器：通过指定标签的某个属性值进行选择，如：input[type=text]
伪类选择器：常用于一个标签的几种状态，如：a:link
通用选择器：用'*'表示，可以匹配所有的元素，建议不要使用
思考：当多种选择器同时选择了一个元素，并对同一属性进行了设置，请问以哪种为准？
选择器的优先级
问题：当多种选择器同时选择了一个元素，并对同一属性进行了设置，请问以哪种为准？
答案：CSS中没有明确的优先级说明，但是大致的原则是定位的越具体优先级越高。
参考：id > class > 其他 > * > 默认
使用说明：
尽量避免多种方式同时修改样式
尽量避免多处修改同一标签的同一样式
优先级相同时，后面的设置会覆盖前面的
可以使用chrome浏览器的调试工具进行查看测试
尺寸及单位
说明：在HTML中单位可以不写，但是在CSS中单位必须写
单位：
px：像素，绝对的单位
%：百分比，相对与父级元素
em：相对于父级元素的倍数
rem：相对于html元素的倍数
width：宽度
height：高度
min-width：最小宽度
max-width：最大宽度
min-height：最小高度
max-height：最大高度
字体设置
font-style：normal(正常)、italic(斜体)
font-weight：normal(正常)、bold(加粗)
font-size：设置字体大小
font-family：字体样式
font：字体相关的简化书写
顺序是固定的，按照上面书写的
font-size和font-family不能省略
如：
font: italic bold 30px 宋体;
文本修饰
text-indent：缩进，通常的单位是em。
overflow：超出容器的范围如何处理，选项：hidden、scroll、auto
显示不完的内容为...效果：
overflow:hidden
white-space:nowrap
text-overflow:ellipsis
另外：尺寸设置的必须要溢出(不能自动适应)
text-decoration：设置横线的位置、风格、颜色，也可取消下划线（none）
位置：none、（下划线）underline、overline、lint-through
对齐设置
text-align：水平对齐方式，left、center、right
line-height：设置行高，当行高与容器高度一致时可以实现垂直方向的居住对齐
vertical-align：行级标签的垂直对齐，top、middle、bottom
背景设置
background-color：背景色
background-image：背景图片，通过url()指定
background-position：指定位置
background-repeat：重复方式
background-attachment：附着方式
scroll：相对于元素固定，会随元素移动，但是不会随内容移动
fixed：相对于窗体固定，不随元素及内容移动
local：相对于元素内容固定，随元素及元素内容移动
background：简写形式
列表设置
list-style-type：前面符号类型
list-style-position：前面符号位置
list-style-image：前面符号图片
list-style：统一设置
定位相关
position：元素定位
static：默认的，四个位置属性不生效
relative：相对定位，相对于原来元素在文档流中的位置
fixed：固定，相对于窗体进行定位
absolute：绝对定位，相对于最近的定位的祖先元素
z-index：距离平面方向，即Z方向的距离，越大越靠上
布局相关
float：浮动， left、right
clear：清除浮动，left、right、both
visibility：显示(visible)、隐藏(hidden)，会保留位置
display：none(隐藏，不会保留位置)，blcok块、inline-block行内块、inline行级元素
盒子模型
margin：外边距
border：边框
border-radius：设置倒角半径
padding：内边距
结论：
宽度 = 左右外边距 + 左右边框 + 左右内边距 + width
高度 = 上下外边距 + 上下边框 + 上下内边距 + height
外边距：
水平方向会叠加
垂直方向取较大值
个人觉得在学习IT这方面现在方便了很多，积极查询资料，现在很多大神的博客都有各种归纳总结，学到手就是自己了，好了，道理大家都懂，不多说，继续加油继续前进
在练习中学习感觉效率明显高很多，并且加上相应的注释，最好加上一些自己觉得需要记牢的知识
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 导入CSS需要写在head最顶部 -->
<link href = "Style_CSS.css" rel ="stylesheet" type = "text/css"/>
<style>
.p1 {
font-size: 12px;
color: green;
}
</style>
</head>
<body>
<img alt="图片找不到" src="D:\练习4：制作开心餐厅页面\图片素材\game01.jpg" />
<p class="p1">
<img alt="图片找不到" src="D:\练习4：制作开心餐厅页面\图片素材\game02.jpg" /> <br /> <i>
开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。<br />
烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。<br /> 步步精心经营，细心打理，我们都能成为餐饮大亨哦。<br />
</i>
</p>
<p class = "p2">
<h1 style = "color:green">如何做菜？</h1>
<img alt="图片找不到" src="D:\练习4：制作开心餐厅页面\图片素材\game03.jpg" />
<br />
<i> 1.点击餐厅中的炉灶，打开菜谱，选择自己要做的食物后，进行烹饪。不断点击炉灶，直到食物进入自动烹饪阶段；<br />
2.每道菜所需要制作的步骤和烹饪的时间不一样，你可以根据自己的时间和偏好来进行选择，还会有各地特色食物供应哦；<br />
3.烹饪完毕的食物要及时端到餐台上，否则过一段时间会腐坏；<br /> 4.食物放在餐台上后，服务员会自动端给顾客，顾客吃完后会付钱给你。
<br /> 如何经营餐厅？
</i>
</p>
<p>
<h1 style = "color:red">如何经营餐厅？</h1>
<i>
1.自己做老板，当大厨，雇佣好友来做服务员为你打工。心情越好的员工效率越高。员工兼职的份数越少，工作的时间越短心情越好；好友间亲密度越高，可雇用的时间越长；<br />
2.随着等级的升高，可雇佣的员工、可购买的炉灶、餐台、经营面积都会随之增加；<br />
3.餐桌椅的摆放位置也很有讲究，它会影响顾客和服务员行走路程。 <br />
</i>
</p>
<p>
<h1 style = "color:red">如何吸引顾客？</h1>
<i> 1.美誉度决定了餐厅的客流量，美誉度高的时候来餐厅的顾客多，美誉度低的时候来餐厅的顾客少；<br />
2.如果不需要等待，就能及时享用到食物，顾客就会满意地增加餐厅美誉度；与之相反，如果没有吃到食物就离开的顾客会降低美誉度；<br />
3.总而言之，储备充足的食物、及时的服务、足够的餐桌椅是必不可少的！ <br />
</i>
</p>
<p>
<h1 style = "color:red">如何和好友互动？</h1>
<i> 1.不忍眼睁睁看好友餐厅的食物腐坏，那就帮忙端到餐台吧！自己还可以获得经验值奖励；<br />
2.仓库里的东西可以赠送给好友，直接拖拽到礼物即可赠送；拖拽到收银即可出售。注意哦，每个级别能收到礼物的总价值是有上限的；<br />
3.系统的额外食物奖励可和好友分享，把分享消息发布到开心网动态上，让朋友们一起感受快乐！每天最多可以从5位好友的餐厅领取免费食物，食物将被放入仓库的冷藏室里，可出售给系统，也可以拖到餐台上卖给顾客；<br />
4.在好友需要帮助的时候，给予帮忙，当然啦，你也可以给好友捣捣乱、使使坏。作为奖励，你也会获得经验值和现金。<br />
</i>
</p>
<br/>
<p class = "p3">
<img alt="图片找不到" src="D:\练习4：制作开心餐厅页面\图片素材\game04.jpg" /> <br />
<i>开心餐厅，让你可以开心的烹饪美味佳肴，从一个简洁的小餐厅起步，逐步打造自己的餐饮大食代。<br/>
烹饪美食，雇佣好友帮忙，装修个性餐厅，获得顾客美誉。
<br/> 步步精心经营，细心打理，我们都能成为餐饮大亨哦。</i>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
p .s1{
color:blue
}
.p1{
font-size:100px;
}
.p2{
color:red;
}
p .s2{
font-weight:bold;
text-decoration:underline;
}
</style>
</head>
<body>
<p>腾讯体育8月20日雅加达（<span class ="s1">文/应虹霞</span>）8月20日，雅加达亚运会第二个比赛日，日本代表团上午突然召开发布会，团长山下泰裕表示，有四名身穿代表团制服的日本男篮队员去逛了<span class = "p1">红灯区</span>，<span class = "p2">并曝光了他们的名字</span>。山下当场宣布取消其本届亚运会参赛资格并遣送回国，深深鞠躬向外界道歉。
四年前在仁川亚运会，日本游泳队员盗窃记者相机一事犹在眼前，这次在雅加达亚运会再曝逛红灯区的丑闻。两年后东京奥运在即，一向以“干净”“道德”著称的日本体育正在遭受前所未有的置疑。
<span class ="s2">红灯区距运动员村车程仅30分钟 被人直击且拍照</span></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
h1 {
color: black;
}
.标题{
color:red;
font-size:18px;
}
.第一段{
color:red;
font-size:12px;
}
.ip {
color: green;
font-size:12px;
}
</style>
</head>
<body>
<h1 class = "标题">望庐山瀑布</h1>
<i class="ip">
<br />日照香炉生紫烟
<br />遥望瀑布挂前川
<br />飞流直下三千尺
<br />疑是银河落九天</i>
<h1>水调歌头</h1>
<i class = "第一段">
明月几时有？把酒问青天。
<br/>
</i>
<i id = "id">
不知天上宫阙，今夕是何年。
<br/>我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
<br/>起舞弄清影，何似在人间？(何似 一作：何时；又恐 一作：惟 / 唯恐)
<br/>转朱阁，低绮户，照无眠。
<br/>不应有恨，何事长向别时圆？
<br/>人有悲欢离合，月有阴晴圆缺，此事古难全。
<br/>但愿人长久，千里共婵娟
</i>
- </body>
</html>
HTML与CSS学习相关推荐
- CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
- 前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- CSS学习笔记 display属性
CSS学习笔记05 display属性 HTML标记一般分为块标记和行内标记两种类型,它们也称块元素和行内元素. 块元素 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属性, ...
- 11个实用的CSS学习工具
为什么80%的码农都做不了架构师?>>> 1. 盒子模型的幻灯片 通过3D转换效果产生的互动的幻灯片.按向左或向右箭头键切换,全屏观看会有更好的效果. 2. CSS Diner ...
- CSS学习笔记-04 a标签-导航练习
个人练习,各位大神勿笑 .. <!DOCTYPE html> <html lang="en"> <head><meta charset= ...
- CSS学习之外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网 ...
- div+css学习笔记一（转）
div+css学习笔记一 (2011-05-12 07:32:08) 标签: div css 居中 背景图片 ie6 ie7 margin 杂谈 分类: 网页制作 1.IE6中用了float之后导致m ...
最新文章
- pdf批量添加图章_关于添加图章，过来人有哪些实用经验
- 在Oracle中IMP导入数据时,如何解决目标数据库字符不一致问题
- Ubuntu9.10安装VMwareTools-7.0.1
- IIS Express总结
- JavaWeb学习之路——SpringBoot 中thymeleaf模板用法（三）
- 福建师范大学计算机组成原理期末试卷,福建师范大学2020年8月课程考试《计算机组成原理》作业考核试题...
- 基于verilog流水灯设计
- python 变量类型注释_变量类型、命名规则及代码注释
- 微信公众号——永久素材的上传
- 剑指Offer_12_矩阵中的路径(参考问题:马踏棋盘)
- SilverLight跨域访问及其常用的几种解决方法
- 怎样找回通讯录的联系人号码？手机通信录联系人恢复教程推荐
- 如何在HTML添加背景图片么,如何在HTML中添加背景图片
- 【云游戏】携手云流送,让普通终端也可畅享高端游戏画质
- 宏的录制之工资条的制作
- 数据结构与算法10：图与图搜索
- 第11章组件装饰和视觉效果-DecoratedBox装饰盒子-背景图效果
- 时间序列的平稳性与差分法
- python输出学生姓名成绩学号_打印所有学生的姓名，学号，性别，年龄，成绩信息...
- access的否定形式_高中英语：否定形式表示肯定意义的句型总结