小白入门基础html和css

桃子蘸酱
171 阅读5分钟
  1. 标题标签(独占一行)
<h1>-<h6>
  1. 段落标签(独占一行)
<p></p>

3.文本格式化标签

文本加粗 <strong></stong> <b></b>
文本倾斜 <em></em> <i></i>
文字删除 <del></del> <s></s>
文字下划线<ins></ins> <u></u>

4.用于布局的标签

<div></div> <span></span>
div独占一行，span一行可以有多个
  1. 图像标签
<img/>
注：设置图片宽高的时候，只修改一个width或height，让图片等比缩放
属性：src title alt width height border

6.路径

相对路径：
  同一路径：直接写文件名字
  下一级路径：/文件名
  上一级路径:../文件名
绝对路径：带盘符的文件
  1. 超链接a标签
<a></a>
属性：href  target:_self（当前窗口打开）/_blank(新窗口打开)
  1. 列表标签（常用于布局）
无序列表: <ul><li></li></ul>
有序列表: <ol><li></li></ol>
  1. 表单标签
<input>
属性：
文本：type
密码：password
单选按钮：radio
多选按钮：checkbox
name：单选按钮或多选按钮设置的每个item的name值必须一致
value:默认值
checked：单选按钮或多选按钮的默认选中状态
submit:提交
reset:重置
maxlength:input的最大输入长度

<label></label> 和input搭配使用，扩大点击范围（没用过这个。）

下拉表单元素
<select><option></option></select>

文本域元素
<textarea></textarea>
  1. 标签选择器
p {}
  1. 类选择器
.sty {}
  1. id选择器（id是唯一的，只能调用一次）
#nav {}
  1. 通配符选择器
*{}

  1. 复合选择器 ①后代选择器：

    ol li {} 
元素2是元素1的后代即可

    ②子元素选择器

    ol>li {}
只能选择最近一级的子元素

    ③并集选择器

    div,p,span{} 用逗号分割

    ④链接伪类选择器

    a:hover{}
注顺序：link visited hover active

    ⑤focus伪类选择器

    用于获取焦点的表单元素

  2. 文字简写

font: font-style font-weight font/size/line-height font-family;
font: italic 700 16px/20px 'Microsoft Yahei'
  1. 文字颜色
color
  1. 文本对齐(文本水平对齐)
text-align:center;(left,right)
  1. 文本修饰
text-decoration:none;(下划线 underline 上划线 overline)
  1. 行高
line-height
行高=上间距+文本高度+下间距
文本的高度是不变的，调行高调的是上下间距
  1. 元素的显示形式
块元素：
h1-h6  div p ul ol li
行内元素:
span a b strong em i del...(a可以放块元素)
模式转化
行内元素转块元素：display:block
块元素转行内元素：display:inline
行内元素转行内块元素：display:inline-block
  1. 单行文字垂直居中
设置line-height = 盒子的高度
  1. 背景
背景颜色：background-color
背景图片：background-image:url()（用于logo或者装饰的小图片或超大的背景图）
背景平铺：background-repeat:no-repeat(不平铺)/repeat-x(x轴平铺)/repeat-y(y轴平铺)
背景位置：background-position可以是方位名词，可以是具体的像素
background-position:top center(没有顺序要求)
background-position:top（只有一个的时候，代表x轴top，y轴center）
background-position:2px 3px;
背景固定：background-attachment:fixed(固定位置)默认为滚动状态

简写形式：background:orange url() no-repeat fixed center left;
背景半透明：background:rgba(0,0,0,.4);
  1. 边框
border:1px solid red;
border-top/border-bottom/border-left/border-right
  1. padding、margin
padding:5px;  上下左右都是5px
padding:5px 10px; 上下5px 左右10px
padding:5px 10px 15px; 上5px 左右10px 下15px
padding:1px 2px 3px 4px; 上右下左
  1. 外边距设置水平居中
①盒子必须设置宽度
②margin:0 auto
  1. 行内元素，行内块元素设置水平居中
父元素上加  text-align:center
  1. 清除默认的内外边距
* {
    margin:0;
    padding:0;
  }
  1. 去掉li的样式
li {list-style:none;}
  1. 设置与父类一样的宽
width:100%
  1. 圆角边框
border-radius:5px;
跟padding margin一样可以设置两个 三个 四个的值
可以单独设置一个角的值：  border-top-left-radius
  1. 设置圆的两种方式
①border-radius:盒子的一半
②border-radius:50%
  1. 盒子阴影
box-shadow:水平位置（可以负值），垂直位置（可以负值），模糊的虚实效果,阴影的大小，阴影颜色，阴影在内部还是外部
  1. 文字阴影
text-shadow:水平位置（可以负值），垂直位置（可以负值），模糊的虚实效果,阴影颜色
  1. 浮动
①浮动会脱标 为一个盒子设置浮动，另一个盒子没有设置浮动，没有设置浮动的盒子会占有设置浮动盒子的位置
②加了浮动的元素具有行内块元素的特点:如果行内元素有了浮动，则不需要转换成行内块元素，可以直接设置宽高的值
  1. 清除浮动
给父类添加：overflow:hidden
清除浮动：after伪元素
清除双伪元素
  1. 定位
相对定位
绝对定位：加了绝对定位的盒子，可以直接设置宽高
固定定位：fixed    position:fixed 以浏览器的可视窗口为参照移动,跟父元素没有关系,不随滚动条滚动
  1. 定位的叠放次序
z-index （正整数，负整数，0，数字越大越靠上，无单位，只有定位的盒子才有这个属性）
  1. 绝对定位的盒子居中（两种实现方式）
①水平居中：left:50%，margin-left：-自己宽度的一半
垂直居中：top:50%,margin-top:-自己高度的一半
②position:absolute;
 top:50%;
 left:50%;
 width:100px;
 height:100px;
 translate(-50%,-50%)
  1. 相同的部分可以用并集来实现
.pre,.next{} 
.pre{}
.next{}
  1. 元素的显示与隐藏
display:none 隐藏，位置不保留  display：block 显示元素
visibility:visible元素可见 hidden 元素隐藏（位置保留）
overflow:hidden文字溢出隐藏 scroll显示滚动条 auto 溢出显示滚动条 不溢出不显示滚动条
  1. 边框包含其中
box-sizing: border-box;
avatar
文章
阅读
粉丝