css知识_html/css_WEB-ITnose
时间：2021-07-01 10:21:17
帮助过：7人阅读
css和html相结合的第一种方式：
1，每一个html标签中都有一个style样式属性，该属性就是css代码
例：
这是一个div区域
2，使用style样式属性，该属性的值就是css代码。一般定义在head标签中，首先加载
例：
3，将上面style标记里的内容写在文件div.css中，再导入。div.css放在同一个文件夹中
@import url(div.css);
4.直接导入css样式
(rel表示与页面的关系)
css代码格式：
选择器名称{属性名:属性值;属性名:属性值;...}
1,html标签选择器
2,class选择器
例：div.biaoqian{}只适用于div区域1
.biaoqian{}适用于所有的
3,id选择器(id值在页面中是唯一的，id通常都是为了去表示页面的一些特定区域使用的)
例：div.#id1{}只适用于div区域2
#id2{}适用于所有的
优先级：html标记 < class选择器 < id选择器标记 < 标记内属性
4,扩展选择器
1,关联选择器(选择器中的选择器)
例：div b {}只适用于此区域
2,组合选择器(对多个标签都这样设置)
例：body,div,{background-color:#36F;color:#F23;}
3,伪元素选择器
例：超链接的状态
a:link{}//未访问
a:hover{}//鼠标移到上面的效果
a:action{}//点击效果
a:visited{}//访问后效果
p:first-line 段落的第一行文本
p:first-letter{}段落中的第一个字母
input:focus具有焦点的元素
布局：float
定位：position：
属性：relative相对定位是按照原来的位置进行定位，他原来的位置还在
相对定位向下向右是正方向
绝对定位：相对于离他最近的有定位属性的父级，他原来占有的位置没有了
z-index层级属性没有单位
css文字属性：
font-size 可以设置字体的尺寸em字符的倍数单位ex一半px像素值
text-align设置文本对齐方式left左对齐，right右对齐 center居中对齐，justify两端对齐
line-height设置元素的行高
text-indent首行缩进
font-weight文本的粗细设置normal按标准显示，bold加粗显示
font-style设置文本显示风格 normal按标准显示 italic倾斜显示
text-decoration设置文本修饰风格underline下划线 overline上划线，line-through删除线 none去除文本修饰风格。
font-variant字体是否大写 small-caps为大写normal为标准小写
color设置字体颜色
font-family 文字字体
padding 内边距 如果有两个参数，一上下二左右 如果三个参数 一上二左右三下 四个参数上右下左
padding-top padding-left padding-right padding-bottom
margin外边距 上下谁的外边距大就是谁的值 左右外边距为两者外边距之和
margin:0 auto;上下外边距0像素，左右自动，相当于居中适用于块级元素，行内元素的margin只有左右，没有上下
margin可以设置为负值，padding不可以
块级元素不设置具体的宽度，默认100% 如果不设置固定的高度，那么元素的高度会根据内容来变换
块级标签转化为行级标签 p{display:inline;}
行级标签转化为块级标签a{display:block;}行级元素不能设置宽高
行级元素不能使用margin: 0 auto;居中要转化为块级元素
overflow:hidden;将溢出的文字隐藏 可以解决div嵌套加float的bug
overflow:scroll;添加滚动条
overflow:auto;自动选择
clear:left;左边清除浮动
background-image属性：背景图片，不影响文字的显示
background-image:url(dog.jpg);设置背景图
background-repeat:;控制背景图的重复方式
background-position:100px 300px;控制背景的位置，第一个参数代表距离元素左侧的距离，第二个参数代表距离元素顶部的距离
同时设置多个元素：顺序为背景颜色 背景图片 背景图重复方式 背景图距离左侧距离 背景图距离顶部位置
background-attachment:fixed;对背景图固定
css精灵sprite技术：让某个有固定大小的元素只显示背景的一部分
例：background:url(dogs.jpg) no-repeat -370px -230px;
鼠标样式cursor：hand是手型 pointer手型兼容性强 crosshair是十字型 text 使移动到文本上的那种效果 wait是等待的那种效果 default是默认效果 help是问号 e-resize是向右的箭头 ne-resize是向右上的箭头 nresize向上的箭头 nw-resize是向左上的箭头 w-resize是向左的箭头 sw-resize向左下的箭头 s-resize向下的箭头 se-resize向右下的箭头 auto由系统自动给出的效果
visibility属性用来控制元素的隐藏和显示状态visible当前元素为显示状态 hidden当前元素为隐藏状态 此属性隐藏元素。位置还在
display：none;相当于没有写这个元素，位置也没有了
opacity:0-1;(w3c标准) filter:alpha(opacity=0-100); (IE)
list-style取消li中的远点
命名规范:id名字必须具有唯一性 class可以有多个 有父子关系的样式，应通过命名体现 合理注释 驼峰命名法：use_name_box或use-name-box
优先级：标签选择器<类选择器white-space:nowrap;在添加浮动时让同一个标签在一行显示，也就是强制不换行
