css部分笔记上传

可参考w3school网站学习

标记语言.html hyperText 超文本（文字 图片 链接） markup language

标记 闭合标签:<></> 开始标签,结尾标签
单标签 :</> 结尾标签

语义化： 会被浏览器抓取

1.标题标签: h h1–h6
语义化：h1对浏览器关键字抓取很重要

2.段落标签： p

3.换行 ：

4.水平线 ：

---

5.img图片：

6.加粗文本： 和

7.斜体标签: 和 em具有语义化

8.下划线： 和

9.删除线： 和 （以上加粗斜体删除线的单词写法都有语义化，尽量用字母写法bisu）

10.去除链接下划线：text-decoration:none

10.钱符号： &yen

11.a标签（转连接）：名字

12.连接标签：

13.target="_blank":连接在新窗口打开

day2

1.对齐:

align:center居中对齐
text-align:center 文本居中对齐

2链接下划线：texst-decoration:
overline(上划线)
underline(下划线)
line-through(中划线)
2.列表:

1.无序列表(无编号)
	<ul style="color:red;list-style:none">
		<li>列表项</li>
	</ul>

2.有序列表(有编号)
	<ol type=“A” start=“3”>
		<li>列表项</li>
	</ol>

3.自定义列表(表头，复合标签)
	<dl>

3.web 结构 html + 样式（衣服css）+ 行为js
1.css 行内 文本内 外部文件

4.style对象
style=“width:
height:
color:”

5.选择器 /样式 1:选择元素 选择器 10/

    1：标签选择器  标签名 { 属性名：属性值；属性名：属性值；.....}
2:类选择器 一组相同名字的元素 class=""              .类名  { }
3:id选择器  唯一识别 唯一一个  id = "id名"          #id名 { }
4.*选择器：全局元素
5.后代选择器：  父 子 {  } 孩子+孙子
6.子代选择器：	父 > 子 {} 孩子
8.伪类选择器：  父 子:first-child  :last-child  :nth-child(2)	第一个孩子
		:visited(点击过的,访问过得)
		:active（点击瞬间）
		:link
9.交集选择器：	没有空格，没有>，黏在一起就可以
10.并集选择器：	多个具有相同样式的元素	.dv1,.myP {}
11.属性选择器：[src="....."] {}




优先级（权重）：      !important(无限大)>id#100>类.10>标签1>*0

6.边框 边宽2px 1px 5px 边型 solid 实现 变色
border:2px solid red

7.hover:鼠标移动

8.font-size:200px 字体大小

9.table标签

10.tr 行

11.th 字段

12.td 单元格

13.border 表格边框

14.cellspacing 单元格间距

15.cellpadding 内容和单元格的距离(内边距）

16.表格背景色 bgcolor

17.base target="_blank" 所有连接都重开一个窗口

18.合并单元格（先确定是跨行还是跨列合并）
1.跨行合并：由上至下 rowspan=“合并行数”
2.跨列合并：由左至右 colspan=“合并列数”

19.表单（搜集用户信息） 控件：input 类型：text(文本框),password（密码）,radio（单选框）,checkbod(复选框)，select(*选择

框),textarea(*文本框)，button,image,file,submit(提交)，reset(重置)

 <form action="#" method="post" name="zhuce">
    	<!--type = "text" 文本框-->

    	用户名：<input type="text" name="username"><br>

    	密码：<input type="password" name="passwd"><br>
    	<!--单选按钮-->

    	性别：<input type="radio" name="sex" value="男">男
        	<input type="radio" name="sex" value="女">女<br>

    	爱好：<input type="checkbox">唱歌
        		<input type="checkbox">睡觉
        		<input type="checkbox" checked="checked">刷抖音
        		<input type="checkbox">摇一摇<br>

    	城市：<select name="" id="">
            	<option value="">北京</option>
            	<option value="" selected="selected">上海</option>
            	<option value="">广州</option>
            	<option value="">深圳</option>
        	</select><br>

        <input type="button" value="登录">
        <input type="image" src="images/up.jpg">
        <input type="file">
        <textarea name="" id="id1" cols="30" rows="20"
                  style="resize:none"></textarea>

    <!--提交按钮必须的-->
        <input type="submit" value="提交">
        <input type="reset">
	</form>

day-03

div:装载容器（块级元素）
span:容器（行内元素）
solid

标签分类：

1.块级元素block（可设高，满宽）：div     p      table    form        ul  li  ol  li  dl  dt
2.行内元素inline(不可设高，可并排)：span    em     a        strong      b
3.行内块inline-block(可以设置高度，也可以并排)  ：img,input
所有元素都是盒子

包裹优先级：块级元素>行内元素>

元素转换：display：块级/行内/行内块元素

行高line-height:
上行文字的顶/底到下行文字的顶/底
顶线、中线、基线、底线

文字垂直居中:
	行高=盒子高时
文本水平居中：
	text-align:center

内边距：padding（内容和边框的距离）：(4)上，右，下，左 (3)上，左右，下 (2)上下，左右 （1）上下左右
外边距：margin（边框和边框的距离）：
外边距移动： margin-left:10px 左移
border:border-width border-style border-color

盒子水平居中：margin:200px auto;

day-04

1.浮动（解决文字环绕，盒子并排）：float : left(左漂流) / right(右) / none （要想并排几个元素就要把几个元素都加上浮动

属性）

head:样式
body:结构

2.伪元素(在结构中添加一个元素) ::after/before {}

3.伪元素清除浮动流
.father::after/before {
content:""
clear:both;
display:block;
}

清除浮动流，要添加到父亲身上

4.溢出隐藏/滚动
overflow:hidden/scroll

5.圆角边框
border-radius:10px(50%是圆)

6.阴影
阴影 box-shadow:
1:水平方向的阴影大小
2：垂直方向的阴影大小
3：阴影的模糊距离
4：阴影的尺寸
5：阴影的颜色
6：外侧(outset默认) 内侧inset

7.定位：
position:static(静态)/relative(相对)/absolute(绝对)/fixed(固定)
top:
left:
bottom:
right:
8.层级：
z-index:

9.透明度：
background-color: rgba(0,0,0,.5);

10.字体大小设置：
1.font-size:2em
若父元素设置14px 则孩子的font-size：1em就是14px 2em==28px
2.font-family:“Adobe Arabic”,“微软雅黑”,"…",sans-serif;
3.font-weight:100–900(字体粗细，400 nmormal 600 bold <400 lighter)
4.font-style:italic(斜) oblique(斜),normal

font:font-style font-weight font-size/line-height font-family

11.颜色：
white balck red green
#fff #000 #000–#fff
#000000–#ffffff
rgba(255,255,2555,);
12.首行缩进：
text-indent:3em
13.背景（1颜色 2地址 3是否平铺repeat/no-repeat（默认平铺repeat） 4.是否固定fixed/score(默认) 5.位置x y）
background：#000 url(“adv.jpg”);

14.几种隐藏
1.display:none (浏览器中不留位置）
2.visibility:hidden:(占位置)

15.自动换行：
word-break：normal(默认)
break-all:允许单词内换行
keep-akk:只能被半角空格或连字付处换行

16. white-space:nowrap(不换行)

17.文字溢出
text-overflow：clip 不显示省略标记（…），而是简单的裁切
ellipsis 显示省略号
必须和overflow:hidden; white-space:nowrap； text-overflow:ellipsis;三个一起用

18.版心居中：width:(是要居中盒子的宽度)

阿里巴巴矢量图标库
建京东项目文件夹
images文件夹
css样式文件夹
js文件夹
index.html首页html
assets静态文件

线布局在写样式
版心样式