CSS快速上手教程
2021-02-12 08:20
标签：间隔 pos http mil 文档流 换行 tac ash 激活 一 选择符 1 通配：*{} 所有元素 类：p{} 如 p 标签等相应元素 ID：#id{} 使用相应 id 属性的元素样式 类：.类名{} 使用相应 class 属性的元素样式 包含：div p{} 被某些元素包含的子元素的样式 选择符分组： #content2 , .STYLE{} 一次定义几个选择符的样式 2 行内样式表： （CSS 里间隔是冒号、分号；HTML 里是等号、空格） 内部样式表： 外部样式表： 二 CSS 字体属性 font: font-family font-size font-style font-weight font-variant（转换大小写） 三 CSS 文本属性 color text-decoration text-align vertical-align direction text-indent（文本缩进属性） line-height white-space（文本空白显示效果 nowrap 强制同行） 四 CSS 背景属性 background: background-color background-img（url()） background-repeat background-attachment（滚动方式） background-position（背景图片位置属性，两个取值——前为水平方向、后为垂直方向； 注意：先定义一个相框，原点在相框，移动的是图片。 实例如下： 五 CSS 边框属性 border: border-style border-width border-color 六 CSS 边距属性 padding 内边距：内容与边框之间的宽度 margin 外边距：元素周围的边界宽度 七 CSS 链接属性.pic{width:28px;height:28px;background:url(../images/icon.gif) no-repeat;}
.pic2{background-position:-40px 0px;}
.pic3{background-position:-80px 0px;}
.pic4{background-position:-120px 0px;}
-------样式与内容的分割线-----------
li class="pic pic1">li> （类名写前面，表示后面的类继承了前面类的属性，
省重写了）
li class="txt">a href="buy.htm" target="_parent">购物车a>li>
li class="pic pic2">li>
li class="txt">a href="help.htm" target="_parent">帮助中心a>li>
li class="pic pic3">li>
li class="txt">a href="JavaScript:void(0);" onclick="addFav();"> 加 入 收 藏
a>li>
li class="pic pic4">li>
）
.a1:link{} （这是伪类）
未访问链接：link
已访问链接：visited
悬停链接：hover
激活链接：active
八 CSS 布局属性
定位属性 position
位置属性 top、right、bottom、left
层叠顺序属性 z-index 默认为 1，值越大越在顶
透明度属性 opacity 1 为饱和，值越小越透明
超出内容属性 overflow
显示属性 visibility
浮动属性 float（只有左、右；默认的文档流是向下排列，使用 float 可以让他们挨个往左上方排列；比如布局时前面两个是文档流排列，第三个写了 float,那么从第四个开始，才是横向排列的，所以 float 是给它后面的元素看的）
清除浮动属性 clear（不想继续往左上排了，就 clear 左）
九 DIV+CSS 布局
宗旨：内容与样式分离
优点：灵活
核心：用 DIV 时，把所有元素都当成一个方块，给它精确的宽高，再 float 它！
十 课堂笔记
1 css 通配符 "*" 可以消除浏览器的默认属性，比如：
*{margin:0;padding:0;}
推荐这样 html,body,div,span,applet,object,iframe,h1,h2,p,a{margin:0;padding:0;}
而不是 *{margin:0;padding:0;}
因为 css 通配符 “*”会将网站内所有元素的默认值重设，这在大型网站会加重客户端的负担，浏览器运行速度变慢。但如果开发的是小型站点或企业网站，页面元素不是很多，使用 CSS 通配符造成的性能影响可以忽略。
2 display ：inline块拥有行属性；block行拥有块属性。
3
弹幕般滚动
4
盒子属性：margin padding border
CSS难点总结
n 盒子模型
ü margin（外边距）
ü padding（内边距）
n 居中
ü 块级元素的位置居中：Margin作为盒子间的距离，在布局中，扮演着较为重要的角色。典型的应用为布局块级元素的水平居中，如：“margin：0 auto;”
ü 文字内容的水平居中：文字内容水平居中：例如段落
内的文字对齐等设置，则设置块级元素的 “text-align：center”，实现文字水平居中；
ü 垂直居中：常见的是单行文字垂直居中问题，可以设置文字所在的行的高度 height 与文字行高属性 line-height 一致，使用“vertical-align：middle;”实现垂直居中。
n 布局属性
ü position（定位）
Ø static
默认属性，按照常规文档流（从上到下，从左到右）进行定位，不能使用 top、left 等类似其他属性定位，如需要使用以上属性，必须使用除了static以外的三种定位方式。
Ø absolute（绝对定位）
指定某元素是相对于它包含的元素进行定位，绝对定位的元素是独立定位的，脱离了静态定位元素中文档流的一部分，它的定位要么是相对最近的定位祖先元素，要么是相对于文档本身。
Ø fixed（固定定位）
相对于浏览器窗口进行定位
Ø relative（相对定位）
当 position 属性设置为 relative，元素按照常规文档流进行布局，它的定位相对于它文档流中的位置进行调整。系统保留着元素在常规文档流中的空间，不会因为要填充空间而将其各边合拢，也不会将元素从新的位置“推开”。
Ø z-index
设置元素的堆叠顺序，拥有更高堆叠顺序的元素总会处于堆叠顺序较低的元素前面，z-index可以拥有负数值，且仅能在定位元素上奏效（例如 position：absolute；）
Ø display
规定元素应该生成的框的类型，常用属性值有 none，block，inline等
Ø none
此元素不被显示；
Ø block
让元素按块级元素显示，前后带换行符，自己占一行，可以用在行级元素上使其拥有块级元素的特点；
Ø inline
让元素按照行级元素（内联元素）显示，一个挨一个，可以用在块级元素上，使其拥有行级元素的特点；
Ø overflow
规定当内容溢出元素框时发生的事情；
默认值：visible（内容不会被修剪，如果超出会呈现在元素框之外），还有 hidden（内容会被修剪，并且其余内容是不可见的），scroll（超出内容会被修剪，但是可以通过滚动条来查看超出的部分）
Ø visibility
设置元素是否可见，visible为可见；hidden为不可见，不同于“display：none；”的是“visibility：hidden;”的元素虽然不可见但是也会占据页面上的空间，前者则不会。（通俗讲，用 display会被挤。所以 display常用于多级菜单显示隐藏）
Ø opacity(透明度)
CSS3的属性，可以代替了之前 CSS中的滤镜属性，可以使用 value直接表示元素的透明度，0.0为完全透明到 1.0为完全不透明，例如：opacity：0.5；
CSS快速上手教程
标签：间隔 pos http mil 文档流 换行 tac ash 激活
原文地址：https://www.cnblogs.com/zhaot1993/p/13032779.html