2020年12月1日 CSS知识点整理

css引入方式，
1.内联：<p style="样式值1:样式名1;样式值2:样式名2;"></p>
2.内嵌：在head中添加style标签，里面写选择器（常见3种）：
id选择器：# 注意一个页面id必须唯一
类选择器：. 标签名中两个class用空格分开。
元素选择器：标签不需加任何属性
3.外部引入：<link rel = "stylesheet" href = "style.css">

选择器：
***优先级：id>class>元素
***引入方式优先级:内联>内嵌>外部
.选择器关系：并列：p，#id_5
父子：用空格分开
属性选择器

css选择器练习：

 ======================

dw中，ctrl+tab可以切换当前编辑的文件
============================
text-decoration:line-through;
text-decoration:overline;
text-decoration:underline;多次指定同一位置的样式，以最后一次为准
==============================
text-indent:2em;首行缩进两个字符
=======================
块状元素都能设置宽高，内联元素一般不能设置宽高
====================
br是行内元素
===============
border-width:thick;
border-style:dotted;
border-color:darkgreen;
三个属性必须都设置，才能显示块元素边框
或者简写：border:3px dotted blue;（顺序可以变）
======================
background-position: -322px -177px; 在chrome里可以按f12 和上下键 测试位置
==========================
hover可以给任何元素设置，div:hover{当鼠标放上去的时候改样式}

.d1:hover{
cursor:pointer;（鼠标变小手）
}
===========================
a:link{
text-decoration: none;
color:red;
font-size: 50px;
}
/*相当于a:link*/
a:visited{
color:darkorange;
font-size: 40px;
}
a:hover{
color:darkred;
font-size: 30px;
}
a:active{
color:navy;
}
/*lvha这四个顺序不能改变*/
=========================
.o1{
list-style-type: upper-alpha;
list-style-image: url(littleicon.jpg);
}可以给ol列表里设置序号形式
============================
#input1{

border: none;
outline: none;
width: 120px;
}去掉input的border和outline，border和outline不是一种东西
input的outline在focus状态下才会出现，根据浏览器不同，outline效果不同
==============================
hr的默认颜色设置：
.color_hr{
border-top-color: blue;
}
=========================
由左向右红到蓝渐变：
linear-gradient(to right,red,blue);

===========================

div默认float是none。float理解成屏幕z轴升高。浮动是针对同级兄弟元素的。
===========================
div宽度可以设置百分比,会根据父级元素确定宽度。一般高度不能设100%，设了会根据内容高度确定。
==========================
清除浮动：clear:left; clear:right; clear:both; 这样可以不让上方块挡住下方。
===========================
盒子模型：margin》border》padding
========================
margin（一起设置各宽度，顺序：上右下左）margin:10px 20px 30px 40px；
margin可以设4个值，2个值，3个值。
========================
margin-left: auto;
margin-right: auto;
这样可以使div居中
======================
ul和li浮动特性可以做导航条
==================
margin重叠：两个没有浮动的挨着的margin会重叠，外边距按最大margin算.设了浮动就不会重叠
=====================
padding不是压缩内部文字空间，而是增加div面积。（div实际面积=div+padding+border+margin）
====================
溢出处理：超出部分隐藏overflow: hidden;超出部分下拉条overflow: scroll;或者overflow:auto;（自动切换）
==============
一般都进行初始化：
*{margin：0px；padding：0px；}

================================

======================================
行内元素：不能设置宽高。可以设置水平方向的margin和padding
块状元素：能设置宽高。可以设置四周方向的margin和padding
替换元素（inline-block）：是行内元素，但是能设置宽高。比如img。
=================================
使用display属性进行转换
============================
display:none;隐藏当前元素，注意不是hidden
===============================
横向滚动条不允许出现
==========================
相对定位（relative）：相对于它本身应该的位置

/*top:10px;
left:10px;*/
bottom:10px;
right:10px;
top和bottom不能同时设，left和right不能同时设
=========================
绝对定位(absolute)：相对于有position属性的父元素定位。如果所有父元素都没有position属性，就去找body。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块
============================
一般父元素用绝对定位，子元素用相对定位。
======================
position：fixed；是相对于屏幕定位
==================
position:sticky; 是不会跑出父元素。
====================
z-index优先级z-index:101;前提：必须有position属性。

=============================

1.css指定字体斜体：
i{
font-style:italic;
}

================

6.这两个容易搞混：
text-decoration-style: solid;
text-decoration-line:underline;
没有text-decoration-type

====

7.background-attachment是设置背景随不随滚动的

====

8.inline不能设置宽高，能设置左右margin，能设置四周padding。
inlineblock和block都可以设置。

=====

position是从该块元素的margin开始计算，父元素的padding开始计算

====

css3功能简介：

border-radius设置圆角，也可以设置4个值

linear-gradient(to left, red blue)渐变色,to top left

rgba(255,255,255,1)设置颜色，最后一个值是透明度，范围是0-1

text-shadow设置阴影

字体不要轻易设置，浏览器识别不了

transform: translate(50px,50px) 别忘了逗号 移动 translate 旋转rotate 缩放scale

过渡transition: transform 2s，width 1s;多个属性用逗号分隔