CSS学习---css基础知识0105

CSS, Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离。 举例:颜色,大小,高度、宽度、内外边距、边框、浮动、定位、字体、居中、超出[overflow]、下划线、显示[display]、分层、透明度[opc]        +     :hover,:after,:before,圆角 css的引入方式css的四种引入方式:

1. 行内式

2. 嵌入式

4. 导入式

行内式:直接添加style属性即可

hello world

嵌入式:嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中<head>/<head> 将一个.css文件引入到HTML文件中<head>/<head> mystyle.css文件内容: div { color: orangered; height: 300px; width: 800px; }导入式:将一个独立的.css文件引入HTML文件中,导入式使用CSS规则引入外部CSS文件,<style>标记也是写在<head>标记中,使用的语法如下:注意:css的基本选择器“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素 分类:

1 基础选择器

2 组合选择器

3  属性选择器

4 伪类(Pseudo-classes)

基础选择器 <head> /<head> <body>

通用选择器: 黄沙百战穿金甲,不破楼兰终不还

普通选择器: 愿你心无所畏,勇往直前...

id选择器: 黄沙百战穿金甲,不破楼兰终不还

class选择器: 黄沙百战穿金甲,不破楼兰终不还

/<body>组合标签:

后代选择器

子代选择器

多元素组合选择器

毗邻元素选择器

后代选择器:F S 匹配所有属于F元素后代的E元素,E和F之间用空格分隔 <head> /<head> <body>

通用选择器: 黄沙百战穿金甲,不破楼兰终不还

id选择器: 黄沙百战穿金甲,不破楼兰终不还

class选择器: 黄沙百战穿金甲,不破楼兰终不还

class3选择器: 黄沙百战穿金甲,不破楼兰终不还

/<body>子代选择器: F > S 子元素选择器,匹配所有F元素的子元素S <head> /<head> <body>

通用选择器: 黄沙百战穿金甲,不破楼兰终不还

id选择器: 黄沙百战穿金甲,不破楼兰终不还

class选择器: 黄沙百战穿金甲,不破楼兰终不还

class3选择器: 黄沙百战穿金甲,不破楼兰终不还

/<body>多元素选择器:F,S 多元素选择器,同时匹配所有F元素或S元素,F和S之间用逗号分隔 <head> /<head> <body>

class选择器: 黄沙百战穿金甲,不破楼兰终不还

通用选择器: 黄沙百战穿金甲,不破楼兰终不还

/<body>image毗邻元素选择器,匹配所有紧随E元素之后的同级元素F <head> /<head> <body>

通用选择器: 黄沙百战穿金甲,不破楼兰终不还

id选择器: 黄沙百战穿金甲,不破楼兰终不还

class选择器: 黄沙百战穿金甲,不破楼兰终不还

class3选择器: 黄沙百战穿金甲,不破楼兰终不还

class3选择器: 黄沙百战穿金甲,不破楼兰终不还

/<body>image内联[inline]元素和块[block]元素的区别块元素和内联元素的嵌套规则:

块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。

有几个特殊的块级元素只能包含内联元素,不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt

li内可以包含div[li是块级别],p不能包含div

块级元素与块级元素并列、内联元素与内联元素并列。

块级标签可以设置大小,宽度;内联标签的大小由文本决定。

block元素和inline元素在文档流中的排列方式

block元素通常被现实为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性;

inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。inline元素设置width、height属性无效。inline元素的margin和padding属性。水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果;但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果

属性选择器基本用法: <head> /<head> <body>
div1
div2
div3
id
/<body> /<html>image其他用法: <head> /<head> <body>

hello world

hello world 2017

hello world 2018

div1
div2
div3
id
/<body> /<html>image伪类伪类:CSS伪类是用来给选择器添加一些特殊效果image 伪类特殊用法之hover的应用:【2018-01-14 由于注释导致的异常代码异常耗时1.5H ~_~...】 /**/ .container .item:hover .text{ display: block; } <head> Title /<head> <body>
1000
/<body> /<html> CSS优先级别样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

1 内联样式表的权值最高       style=""-------------------1000;
2 统计选择符中的ID属性个数。    #id    -------------100
3 统计选择符中的CLASS属性个数。 .class  -------------10
4 统计选择符中的HTML标签名个数。     p     --------------1

常用属性: 颜色属性,字体属性,背景属性,文本属性,边框属性...CSS元素的高度和宽度margin:10px 5px 15px 20px;-----------上 右 下 左 margin:10px 5px 15px;----------------上 右左 下 margin:10px 5px;---------------------上下 右左 margin:10px; ---------------------上右下左CSS的颜色属性:
ppppp
ppppp
ppppp
ppppp
CSS的字体属性font-size: 20px/50%/larger font-style:italic font-family:'Lucida Bright' font-weight: lighter/bold/border/

hhh

背景图片#pic { height: 600px; background: #ffef5d; background-image: url("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=825738955,2683699723&fm=27&gp=0.jpg"); background-repeat: repeat-y; /*只能沿着X轴平铺*/ /*background-repeat: no-repeat; !*不重复*!*/ background-size: 300px, 500px; background-position: center center; /*第一个参数控制左右,第二个控制上下*/ } 注意:如果将背景属性加在body上,要记得给body加上一个height,否则结果异常,这是因为body为空,无法撑起背景图片;另外,如果此时要设置一个width=100px,你也看不出效果,除非你设置出html文本属性color: #161bcd;background: #ffe128; text-align: center;/*设置文字位置[设置文本的左右位置]*/ line-height: 50px; /*设置行高[文本+上下空间的高度],文本会居中显示*/ letter-spacing: 15px; /*字母间距*/ word-spacing: 15px; /*单词距离,也可以在图片间隙设置图片的位置*/ text-indent: 150px; /*首行缩进*/ text-transform: capitalize; /*文本格式显示,首字母大写*/display属性:

共有4个属性值:

None
      Block: 块级标签,可以将内敛标签转为块级标签
      Inline: 内联标签,可以将块级标签转为内敛标签
      inline-block可做列表布局

inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决 这里多使用了一级父类标签,用来达到消除间隙的效果
    111    222    333 
image列表属性ul,ol{ list-style: decimal-leading-zero; list-style: none;
list-style: circle; list-style: upper-alpha; list-style: disc; }边框属性+内外边框属性Margin:以border/text/padding为边界,否则会一直往上找 <head> Title /<head> <body>
div1
div2
div3
/<body> /<html>练习:实现大小盒子的嵌套 <head> /<head> <body>

/<body> /<html>文档流:

正常文档流:将元素(标签)在进行排版布局的时候,按照从上到下,从左到右的顺序排版

脱离文档流:将元素从文档流中取出[默认取出后不再进行渲染了],进行覆盖,其他元素会按照文档中不存在该元素重新布局。

float[浮动](非完全脱离 ): 盒子会无视元素,但是下一个元素会给原理元素的文本让位置

absolute position[绝对定位](完全脱离): 盒子会完全无视上一个盒子的素有内容

float 浮动      定义:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。(注意这里是块框而不是内联元素;浮动框只对它后面的元素造成影响) 注意 当初float被设计的时候就是用来完成文本环绕的效果,所以文本不会被挡住,这是float的特性没有文字的效果演示 <head> /<head> <body>
/<body> /<html>有文字的效果演示:float是非完全脱离,使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围(可以说是部分无视) <head> /<head> <body>
div1
div2
div4
div3
/<body> /<html>上下结构div盒子重叠现象解决方法: 1、要么给.container设置固定高度,一般情况下文字内容不确定多少就不能设置固定高度,所以一般不能设置“.container”高度(当然能确定内容多高,这种情况下“.container是可以设置一个高度即可解决覆盖问题。   2、要么清除浮动。 注意:clear属性只会对自身起作用,而不会影响其他元素。如果一个元素的右侧有一浮动对象,而这个元素设置了不允许右边有浮动对象,即clear:right,则这个元素会自动下移一格,达到本元素右边没有浮动对象的目的。 <head> Title /<head> <body>
box1 向左浮动
box2 向右浮动
box3
/<body> /<html>总结:float: 清除浮动:1. clear: both; 2. overflow:hidden;   3. :after    [需要在父类级别添加CSS样式,因为会添加元素到最后一个子类的位置] a. 已知外层高度      内元素浮动时,不用管,因为可以根据内容设定元素的浮动高度 b. 未知外层高度    - 原始:在最后一个标签的位置[沉底位置]添加:
    - 牛逼:这种做法可以保障我们的最后一个位置的标签可以清除前面所有的浮动[父类级别添加];             .clearfix:after{                 content: '.';                 display: block;                 clear: both;                 visibility: hidden;                 height: 0;             }                                    
                                        
               
               
                                          
<head> Title /<head> <body>
hello world
/<body> /<html>Position属性Position:               fix:     位置固定;返回顶部, 视频的小窗口的实现           static:    默认的位置,正常流      absolute:    绝对位置,非正常流,会向上找到relative标签的时候,然后以此为点开始布局       relative:    以原来的位置为基本,进行位置的移动,且保留原来的位置,正常流 <head> Title /<head> <body>
div1
div2
div3

返回顶部

/<body> /<html>添加了父类的positive显示结果:如果父级设置了position属性,例如position:relative;,那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的,那我子元素就设置position:absolute;父元素设置position:relative;,然后Top、Right、Bottom、Left用百分比宽度表示。 <head> Title /<head> <body>
div1
div2
div3

返回顶部

/<body> /<html> 总结:参照物用相对定位,子元素用绝对定位,并且保证相对定位参照物不会偏移即可。