这是博客摘录，我今天学的内容基本上里面都已经概括好了，所以摘录到博客，记录下来，进行了一些调整补充，自己的练习心得在后面
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>
1141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
