01-web前端初始-CSS

WEB 前端-css

1、标签

• form表单

// 表单框
<form name="表单名称" method="post/get" action=""></form>
//密码框
<input type="password" />
// 提交按钮
<input type="submit" value="按钮内容" />
//重置按钮
<input type="reset" value="按钮内容" />
//单选框  单选按钮里的name属性必须写，同一组单选按钮的name属性值必须一样。
<input type="radio" name="ral"/>1
<input type="radio" name="ral" />2
//复选框
<input type="checkbox" name="like" />
// (disabled="disabled" :禁用)   (checked="checked" :默认选中)
<input type="checkbox" name="like" disabled="disabled" /> 
// 下拉菜单  selected 默认选项 - 排列第一位
<select name="">
<option>菜单内容</option>
</select>
// 多行文本框
<textarea name="textarea" cols="字符宽度" rows="行数"></textarea>
//按钮  他和submit的区别是 ，submit是提交按钮 起到提交信息的作用，button只起到跳转的作用，不进行提交。
<input name="'" type="button" value=“按钮内容” />

• 列表

//1、无序列表： ul li
<ul>
	<li>1</li>
	<li>2</li>
</ul>
//2、有序列表： ol li
<ol>
	<li>1</li>
	<li>2</li>
</ol>
//3、自定义列表： dl dt dd    dt里面可以放名词或者图片，dd里面是解释
<dl>
	<dt></dt>
	<dd></dd>
</dl>

• div
  div分割：就是可以帮我们把网页划分成不同的区域范围，一般用在其他元素的最外层 特点：自上而下排列的
  2、css层叠样式
  css样式表有三种：内部样式表 外部样式表 内联（行内）样式表
  css中常用的属性：width：宽度、height：高度、font-size：字体大小、color：文字颜色、background-color：背景颜色、 border:值1 值2 值3; 边框 值1表示边框的宽度 值2表示边框的样式（solid实线） 值3表示边框颜色、text-align:left/center/right; 文字水平对齐方式、line-height 行高 、margin：外边距 padding：内边距、 *{margin:0;padding:0;} 清除内外边距 *表示所有的意思
• margin外边距—指的是元素与元素之间的距离—控制元素的位置

margin：值1； 表示四个方向
margin：值1 值2；值1表示上下  值2表示左右
margin：值1 值2 值3；值1表示上  值2表示左右 值3表示下
margin：值1 值2 值3 值4；值1表示上  值2表示右 值3表示下 值4表示左

• padding 内边距（填充） —指的是元素内容到边框之间的距离

padding：值1； 表示四个方向
padding：值1 值2；值1表示上下  值2表示左右
padding：值1 值2 值3；值1表示上  值2表示左右 值3表示下
padding：值1 值2 值3 值4；值1表示上  值2表示右 值3表示下 值4表示左
	padding-left padding-right padding-top padding-bottom
// padding 使用的注意事项
1、使用了padding后，如果想要保持原有的大小不变从元素的宽度和高度上对应的减去设置的padding值。
2、如果元素的内容（元素、标记）是文本的话，控制内容的位置只能是padding。
3、如果元素的内容是标记的话，既可以使用margin，也可以使用padding去控制的位置，这个时候，哪个简单使用哪个。
4、如果一个自上而下的元素没有设置宽度的话，使用padding值可以不用减自上而下的元素：可以设置宽高  独占一行   如果自上而下的元素没有设置宽度，它的宽度是默认容器宽度的。

• float 浮动

作用：就是让自上而下排列的元素可以横着排
float：left/right/none； 左浮/右浮/不动

• 清除列表符号：list-style：none
• 取消下划线：text-decoration：none；
• ink元素

<link rel="stylesheet" type="text/css" href=""/>
	rel表示关联样式表 把html文件和css文件进行连接  type定义文档类型，可省略  href为路径 内部样式表和外部样式表放置网页头部区域 
//ink与import的区别
a、link是html标记提供的一种方式，而import是css的一种方式
b、link可以让html代码和css代码同时进行加载，而imoport会先加载html代码再去加载css代码
c、link没有兼容问题，而import一些老的浏览器不支持
d、link可以被js里面的DOM控制，而import不可以

• css样式优先级
  a、内联样式表的优先级最高
  b、内部样式表的优先级和外部样式表的优先级和书写顺序有关，后面的会把前面的给覆盖掉。
  注意：优先级覆盖的都是相同的属性，不同的属性依旧存在（起作用）。
• 选择器

  a、id选择器：html：<标记 id=“名称”></标记>  id具有唯一性，一个标记对应的只能有一个id。
  b、包含选择器（后代选择器）：选择符1 选择符2{属性：属性值;}
  c、通配符：*｛属性：属性值;｝
  d、群组选择器：语法：选择符1，选择符2，选择符3{属性：属性值;}  作用：一次可以给多个标记设置样式
  e、伪类选择器：伪类选择器 --- 表示的是某种状态 --- 鼠标的状态 --- 鼠标划过---鼠标点击过后、鼠标按下
   选择器:link 表示鼠标的初始状态
   选择器:visited 表示鼠标访问后的状态
   选择器:hover 表示鼠标划过时（悬停）的状态  --- 使用最多的
   选择器:active 表示鼠标按下时的状态（鼠标按下不松开）
   注意点：伪类选择器有浏览器缓存问题
  

  • 权重
    权重是选择所具有的一种特性，可以用来解决一些选择器之间的冲突问题
    权重（优先级） 解决问题：当发生冲突的时候，以优先级（权重）高的为标准。
• 背景属性：background

1）、background-color:背景颜色
2）、background-image:url(路径);背景图
	背景图的使用规则：a、当背景图小于容器大小时，背景图平铺  b、当背景图大于容器时，背景图的某些部分显示不完整  c、当背景图等于容器大小时，背景图刚好显示
3）、background-repeat:背景平铺属性  repeat-x（水平平铺）  repeat-y（垂直平铺）  repeat（平铺默认值）  no-repeat（不平铺）
4）、background-position:值1 值2; 值1表示水平位置  值2表示垂直位置 --背景图的位置
background-position-x     background-position-y
缩写形式：background：值1 值2 值3 值4；值1表示背景颜色 值2表示背景图 值3表示平铺 值4表示背景位置

补充：
span标记--文本节点--标记比较纯洁，因为它没有任何自带的默认样式
当容器没有设置高度的时候，图片会默认把容器的底部撑大几像素--大概3px；
input有默认2px的边框  去除边框border:none/0; 横向排列的元素换行后，元素与元素中间会由默认的间隙
取消input默认自带的蓝色边框：outline:none;
鼠标指针变成手型：cursor:pointer;