CSS:
#HTML 页面的骨架
#CSS 衣着，化妆计数，
#JS 注入灵魂
CSS基本概念
C：cascading 一层一层的 层叠
S：style 风格/样式
S：sheet 表格
全称：层叠样式表，必须依赖于HTML
书写位置
#写在标签的style属性中
注意：一般不会写在style属性中，因为如果属性中的代码太多
那么整个标签就非常臃肿
如果只是做一两个简单的美化，那么就就可以偷懒写在里面
#写在页面的style标签中
注意：学习期间推荐写在这里，工作不推荐（写在head中）
如果标签中的css代码特别多，整个页面就很臃肿。
#写在外部的css文件中，通过link标签将文件引入到页面上
xxx.css 工作写在这里
书写语法：
#style属性中(键值对 key：value)
#style 和css文件中
#选择器（获取目标标签 美化的目标是谁）
1.id选择器（id唯一标识 id=“英文字母_单词”）
语法
#id名 {
属性名：属性值；
属性名：属性值；
属性名：属性值；
}
#id名1,#id名1,#id名1 {
属性名：属性值；
属性名：属性值；
属性名：属性值；
}
2.class选择器(对一类标签进行一起美化 class=“类名”)
语法：
.class名{
属性名：属性值；
属性名：属性值；
属性名：属性值；
}
3.元素选择器（直接用标签名 对同一种标签进行美化）
语法：
标签名{
属性名：属性值；
属性名：属性值；
属性名：属性值；
}
a{
属性名：属性值；
属性名：属性值；
属性名：属性值；
}
4.其他选择器
伪类选择器 后代选择器 兄弟选择器 复杂选择器
复刻页面
常用美化技术
使用的美化/布局标签div+css美化
div 盒子标签 没有任何默认样式特点：块级元素
span 无名，专门用于局部文字的美化 特点:行内元素
位置
外边距：margin
如图：
居中 只要让左右两边的外边距都设置成auto
**大小**
wdith
height
背景
background
字体
font
颜色
color 前景颜色(字的颜色)
边框
border
文本格式
text-align
显示模式
display
块级 block
行内 inline
隐藏 none
国际惯例：设置左和上边两边顶格如图
html,body{
margin: 0;
}
没加的时候
加了之后
加粗：font-weight: bold;
输入账号密码前的文字提示：placeholder
去掉超链接 a 下划线
text-decoration
hover变色：一般用于登录注册按钮鼠标移动到上面时候的变色
btn{//设置初始颜色
background-color:green;
}
btn:hover：:{//设置鼠标放上去的颜色
background-color:red;
}
//设置按钮
<input type="button" id="btn"></input>
/* 如果页面没有后续的滚动 可以设置高度百分百 */
图标网址推荐：https://www.iconfont.cn
图片下载地址推荐：https://cn.bing.com/images/trending?form=Z9LH
背景图片不能变圆：只能通过更改图片为圆形进行实现
以下全部都在选择器内实现
一行实现两张图片：display: flex;
但是会出现仍然占了两行的情况不知道怎么办
也不知道如何调整两张图片之间的距离
设置背景透明度：
background-color:rgba(20,20,20,0.4);
0.4为透明度（0为纯透明1为不透明）
图片的换行实现不了只能通过增大margintop的方式进行换行
渐变色：好像很麻烦
文本框上下居中：没找到
背景图片不重复：background-repeat: no-repeat;
文本框中的背景图片起始位置：background-position: left ;
不懂的如何设置在不靠左边的位置
设置图片大小：先设置一个<div>里面的图片元素，
写一个图片选择器，在选择器中设置图片大小；
文本域：type=“textarea”
文件选择器：type=“file”
单选框的选项切换：input里面打入name="值"两个单选框的值相同
OJBK: span元素
50万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
