标签：知识点 样式 标签 元素 background div 选择器 CSS
CSS
CSS叫做“层叠样式表”
网页中：HTML相当于布料（结构）
CSS网页相当于上色（美化）
样式如何显示HTML元素
样式通常存储在样式表中
把样式表添加到HTML元素里
定义css的方式
行内样式，内联样式（了解）
I Love Java
如：
I Love Java
如果当前的样式不需要复用，可以用航行内样式
如果涉及优先级需要行内样式
内页样式（了解）
在当前页面声明一个样式（给样式起个名字，如果有人想要使用或者修改，直接用这个名字就行了 在style里写）
(1)标签选择器
p{
background:red
}
（2）类选择器
声明样式的时候需要用一个英文的点，使用的时候不用
.p{
background:red
}
（3）id选择器
声明样式的独有标记"#",使用时同样没有
#p{
background:red
}
外部样式（推荐）（l了解）
CSS的选择器（了解）
1.标签选择器（了解）
2.类选择器（了解）
3.id选择器
4.组合选择器（可以选多个）
div，p{
}（div与p两个标签的样式一摸一样的，选中div和p）
5.后代选择器（不管嵌套多少层，都能选到）
div p{
}(选中div里面的p)
6.直接子标签选择器（选儿子，不选孙子）
div>p{
}
7.选紧跟在div后的p
div+p{ }
8.属性选择器
}
=文本框永远只有一行
文本区可以换行
9.
[type~=t]{
}(包含某个单词的所有元素)
10.伪类 选择器
a link{
}
a hover{
}(鼠标悬停)
a:action{
}（元素被激活）
a:vistted.{
}(点过的链接)
nth-child(): 选中第几个
checked：选中所有被选中的元素
css层叠性(没听懂)
优先级
类>标签>id
层叠性
如果样式冲突，遵循就是就近原则，哪个样式离结构近，就选哪个
如果样式不冲突，就不层叠
继承性
子标签会继承父标签的某些样式
*权重：继承的样式权重为0（继承过来的样式是最不重要的，优先级最低）
行内样式权重最高
如果权重相同，继续就近原则
!important 可以改变权重，改成无限大（比行内样式还要大）
css常用的单位：
1.px像素（绝对单位 一个像素代表一个点，如一个100px*100px的正方形，宽度100个点，高度100个点）
2.em（相对单位，它会参考它的父级元素。在字体上使用比较多，父级元素的字体是16px，要设置元素的字体大小为2em，当前元素的字体大小就是32px。
3.rem相对单位，由页面决定，当我们该百年来浏览器的页面设置，页面的字号也会随之发生变化。应用在老人版。
4.百分比，相对于父级元素的比例
字体大小：font-size:像素
字体样式：font-family：字体名字
行高：line-height：~~~px
粗细：font-weight：
字体下划线：text-decoration:underline/none
字体颜色：color：
*如果样式很多，每个样式后用；结尾
背景
div可以理解为一张纸，不对其进行任何设置就是一张透明的纸
背景颜色：background-color
背景图片：background-image
简写：background：
颜色的表示方法：
1.英文 2.rgb(是一个函数) 3.rgba：多加了一个透明度（透明度0-1 全透明-不透明） 4.16进制
边框
边框线样式：border-style：dotted;
边框线的宽度：border-width:Spx;
边框线的颜色：border-color：
简写：border：
区块属性
显示方式：display:（block块 inline行 none不显示）
行：不能换行 块：能换行，能设宽高 行级块：不能换行，有宽高
盒子模型：去进行网页模型的
width height:表示内容区的宽和高
margin：外边距，距离上一个元素的位置
padding:内边距，本元素内部空出的距离
border：边框线
定位
position: absolute：绝对定位 当前的文档流可以理解为飘起来了，参照物是他的父级元素
relative:相对定位 ：参照物是已经定位的父级元素，占原有位置，不会上天，父相子绝
static:文档流（默认）
fixed:浮动
visibility：hidden：隐藏
overflow：溢出样式
scroll：滚动条
浮动
浮动的元素会脱离原本的文档流，会造成父元素的高度坍塌
包围图片和文本的div不占据空间，使用了浮动的元素，导致后面的元素错乱
感想：感觉很多东西比较难理解，看着老师敲代码，跟着思路走还可以，但是自己去进行设计完全没有思路。
标签：知识点,样式,标签,元素,background,div,选择器,CSS 来源： https://www.cnblogs.com/figh466/p/16468218.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。