html+css学习笔记
html
head：设置给浏览器的标签
body：给用户看的
css
cascading style sheet 层叠样式表-->装修HTML
引用方式1：行间样式
<div style="
width:100px;
height:100px;
background-color:red;
">
</div>
引用方式2:页面级css，在head中
<head>
<title>Document</title>
<style type="text/css">
div{
width:100px;
height:100px;
background-color:green;
}
</head>
引用方式3：外部CSS文件
(1)新建一个lesson3.css文件,放在html相同路径下
div{
width:100px;
height:100px;
border-radius:50%
background-color:green;
}
(2)在head
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
css文件插入到html中位置
通过选择器来实施
1.ID选择器 元素和ID之间需要一一对应
2.class选择器 元素和class之间可以多对多
3.标签选择器 所有相同的标签都对应有效
4.通配符选择器 所有的标签都对应有效
5.属性选择器 [id]
优先级别 !important>行间样式>ID>CLASS=属性选择器>标签>通配符
css权重
类别 权重（256进制）
!important infinity
行间样式 1000
id 100
class|属性|伪装 10
标签|伪元素 1
通配符 0
lesson3.html
<html lang="en,zh">
<head>
<meta charset="utf-8">
<title>淘宝网，套路真多</title>
<link rel="stylesheet" type="text/css" href="lesson3.css">
</head>
<body>
<!-- 选择器 -->
<!-- 1.id , 元素和ID之间需要一一对应-->
<div id="only">123</div>
<div id="only1">234</div>
<!-- 2.class 元素和class之间可以多对多-->
<div class="demo">567</div>
<div class="demo demo1">789</div>
<!-- 3.标签选择器 所有div都可以可以 -->
<div>123</div>
<div>666</div>
<!-- 所有的span都有效 -->
<span>123</span>
<div>
<span>345</span>
</div>
<!-- 4.通配符选择器 -->
<div>如果css中*，表示所有的标签都有效</div>
<!-- 优先级别 -->
<div id="only" class="demo" style="background-color: red">383</div>
</body>
</html>
lesson3.css文件
#only{
background-color: red;
}
#only1{
background-color: green;
}
.demo{
background-color: yellow;
}
.demo1{
color:#f40;
}
div{
background-color: blue;
}
span{
color:#f40;
font-weight: bold;
}
* {
background-color: green;
}
//属性选择器
[id]{
}
-css复杂选择器，权重计算问题，css基础属性-------------------------------------------------------------------
*浏览器是按照从右往左来识别父子选择器的
父子选择器/派生选择器
div span{
background-color：red；
}
直接子元素选择器
div > span{
background-color:red;
}
并列选择器
3
/* css 只选择2的话 */
div.demo{
background-color:red;
}
/*分组选择器*/
em,
strong,
span{
background-color:red;
}
下面的情况属性不重复的就不会覆盖，并且都有效，这样可以优化代码
.demo1{
background-color:red;
}
.demo2{
background-color：red；
font-size:50px;
}
.demo1,
.demo2{
width:100pix;
height:100pix;
}
字体属性
div{
font-size:30px;
font-weight:bold;
font-style:normal;
font-family:cursive;
color:#ff4400;
border:1px solid black;
}
文本属性
div{
border:1px solid black;
tect-align:left;/左对齐/
height:200px;
line-height:200px;/单行高度/
text-indent:2em;/文本缩进 em = font-size/
text-decoration:none;/underline,overline,linethrough/
cursor:poniter;
}
伪类选择器
a:hover{
background-color:orange;
}
1.行级元素 内联元素，inline
内容决定元素所占位置，不可以通过css改变宽高
span,strong,em,a,del
2.块级元素 block
独占一行，可以通过css改变宽高
div,p,ul,li,ol,form,address
3.行级块元素
内容决定大小，可以改宽高
img
定位
绝对定位
元素脱离原来的层面，
相对于最近的父级定位，如果没有的话，相对与文档定位
div{
position：absolute；
left：100px；
top：200px；
}
相对定位
保留原来的位置进行定位
相对于原来的位置定位
relative
div{
position：relative；
left：100px；
top：200px；
}
fix定位
div{
position:fixed;
left:0;
top:300px;
width:50px;
height:200px;
background-color:red;
color:#fff;
}
屏幕居中
div{
position:absolute；
left:50%;
top:50%;
width:100px;
height:100px;
background-color：red；
}
-sublime 使用技巧---------------------------------------------------------------------------------------------
1.快速生成标签
(1)敲入 div
(2)按下tab键
(3)软件自动生成
2.快速生成link
(1)敲入 link
(2)按下tab键
(3)软件自动生成
3.域名和IP地址
域名：www.baidu.com
IP地址：39.156.69.79
域名纪念馆过dns转换为地址
4.生成注释
ctrl+？
