一、html需掌握的:
1. img标签 属性:src alt title width height 2. a标签 属性:href target 3. ul 标签及li 标签,二者都是块级标签 ul 属性(type:disc circle square none) 4. table 标签及 tr 标签 和 td 标签和 th 标签 属性:border cellpadding cellspacing width rowspan colspan 5. form 表单 input 标签 :type类型 6. select 标签 option 标签 属性:multiple 及 selected 7. lable 标签 属性:for
二、css需要掌握的第一部分:查找标签
1.css三种导入方式:
1.行内式:常用在网站页面最下端,网站的介绍中
缺点:html与css代码杂糅在一起,耦合性太强
2.嵌入式:<style></style>
3.链接式:<link rel="stylesheet" href=""/>
2.css选择器:
一 基本选择器 1 标签选择器 div{ color: red; } 2 id选择器 #p2{ color: red; } 3 class选择器 .c1{ color: red; } 4 通配选择器(了解) * { color: red; } 二 组合选择器 1 后代选择器 .c2 p{ color: red; } 2 子代选择器 .c2>p{ color: red; } 3 毗邻选择器 (了解) .c2+p{ color: red; } 4 兄弟选择器 (了解) .c2~p{ color: red; } 5.多元素选择器 .c2 .c3,.c2~.c3{ color: red; background-color: green; font-size: 15px; } 6. p.c1{ color: red; } 表示的是选择一个既是p标签并且是c1类标签的 7. class=‘s1 c1‘ 标签可以有多个类名 8.属性选择器: (可以自定义属性) 1. [egon] { color: red; } 2. [egon=‘dog‘] { color: red; } 3. p[egon] { color: red; } 选择的是p标签中属性是egon的 如:<p egon="dog">asd</p>
3.伪类: 伪类都是通过: 实现的 伪类的目的:解耦
anchor伪类: 一般和a标签连用 属性: :link {color: red;} 没有接触过的 链接是 红色 :hover {color: gray;} 鼠标悬浮在链接上 是 灰色 :active {color: green;} 访问时 是 绿色 :visited {color: gold;} 访问完 是 黄色 .outer:hover .inner1{color: gold;} 表示的是 悬浮在outer位置时 outer的后代inner1区域变化颜色 这种情况,只能是后代,其他情况不行
before after 伪类 例:p:before{content:"hello";color:red;}
4.选择器优先级:
三、css需要掌握的第二部分:属性操作
1.文本:
1.颜色:十六进制/red/RGB 2.位置: 水平:text-align:left / right / center / justify 垂直:line-height=行高 3.间距:line-height:10px; 4.文本与图片对齐:vertical-align:middle / top / ±数字(+下移,-上移) 注意:动的是图片 5.对 a 标签操作时 一定要定位到 a 标签:text-decoration:none; 去掉a 标签的下划线 6.font-size:10px; 字体大小 7.font-weight:light / bold / broder 调字体粗细 8.font-style:oblique/italic 斜体 9.text-indext:30px; 首行缩进 10.letter-spacing:10px; 字母间距 11.word-spacing:20px; 单词间距
2.内外边距 padding 与margin
padding 内边距 加上padding后盒子区域会变大 padding 简写: padding:50px 上下左右都是50 :50px 20px 上下50 :50px 20px 10px 上 50 左右 20 下 10 :50px 20px 10px 10px 上 50 右 20 下 10 左 10 margin:盒子与盒子的距离(外边距) {width:80%; margin: 0 auto; } 0 表示上下距离,auto 是左右居中
3.边框属性border
border 加上border后盒子区域会变大 属性: 1.border-width 2.border-style 3.border-color 4.简写: border:3px solid red;
4.背景属性
1. background-color: red; 2.background-image: url(""); 3.background-repeat: no-repeat / repeat-x / repeat-y; 图片重复 4.background-position: center; (与background-position:center center一样) background-position: 400px 200px; 背景图片距离左边界400px,上边界200px 5.简写:background:url("") no-repeat center; 图片居中不重复 6.窗口小图片大时,移动图片,在浏览器中调尺寸
5.display 属性
dispaly:inline-block 变成内联块级标签---可以解决块级在一行显示问题 dispaly:none 隐藏盒子 三个盒子,如果中间的盒子设置了dispaly:none ,并且它是三无属性(无边框、无padding、无文本),那么下方盒子就会顶上来
6.overflow 属性
overflow:hidden / auto / scroll overflow:hidden 解决溢出问题
7.position 定位
1. position:static 默认位置 2. position:fixed 固定位置 例子: position:fixed; top / left / bottom / right :20px (相对可视窗口的距离) 3. position:relative; 相对自己的位置,并且原位置保存 例子: position:relative; top:20px; left:200px; 4. position:absolute; 相对已定位的父级,并且原位置不保存 例子: position:absolute; top:200px; left:200px;
8.float 浮动属性: 解决多个块级标签在一行显示
1.浮动布局的位置:看上一个元素是不是浮动元素,如果是就挨着放,如果不是就另起一行放 2.清除浮动: 1 clear:left; 清除自身左侧不能有浮动元素 2 clear:right; 清除自身右侧不能有浮动元素 3 clear:both; 清除自身左右两侧不能有浮动元素(按照先后顺序判断) 4 父级塌陷问题
时间: 2024-10-11 05:14:38