CSS基础入门(详细总结笔记)

目录

1、CSS介绍

2、CSS引入方式

2.1、行内样式

2.2、内联样式

2.3、外联样式

2.4、样式的优先级

2.5、样式选择

3、CSS选择器

3.1、基本选择器

3.2、属性选择器

3.3、层级选择器

3.4、组合选择器

3.5、伪类选择器

3.6、通配符

3.7、选择器优先级

4、CSS盒子模型

4.1、基础样式

4.2、盒子模型

4.2.1、边框颜色

4.2.2、边框粗细

4.2.3、边框样式

4.2.4、边框的简写

4.2.5、外边设置

4.2.6、内边设置

4.2.7、背景

4.2.8、display属性

4.3、浮动

4.3.1、清除浮动

4.3.2、解决浮动塌陷问题

4.4、定位

4.4.1、相对、 绝对定位

4.4.2、固定定位

4.4.3、堆叠顺序

5、CSS3常见效果

5.1、圆角效果

5.2、透明效果

5.2.1、背景透明

5.2.2、整体透明

5.3、盒子阴影

5.3.1、文本阴影

5.4、响应式效果

5.4.1、手机屏幕的适应

5.4.2、页面自适应


1、CSS介绍

层叠样式表其实就是对静态页面进行装饰,但是,特别要注意的点是:通常建议表现形式与页面内容分离(例如:人就是内容,穿着打扮就是表现形式)。

2、CSS引入方式

2.1、行内样式

行内样式(将样式直接写在标签上),需要使用style属性。


每天叫醒我的不是闹钟,是梦想!!!
每天叫醒我的不是闹钟,是梦想!!!
每天叫醒我的不是闹钟,是梦想!!!

该方式可用于提高样式的优先级,多次使用会导致代码臃肿,不利于后期维护 。 

2.2、内联样式

讲页面内容与表现形式进行分离,方便对样式进行统一管理。



	
		
		
        
		
	
	
		
每天叫醒我的不是闹钟,是梦想!!!
每天叫醒我的不是闹钟,是梦想!!!
每天叫醒我的不是闹钟,是梦想!!!

钢铁侠

蝙蝠侠

蜘蛛侠

2.3、外联样式

对内联样式进行进一步的抽离,方便多个页面共用同一个样式,创建一个css文件,需要该样式的HTML直接引用样式即可。在项目下创建css包,创建css文件

CSS基础入门(详细总结笔记)_第1张图片

外联样式引入方式有两种:

link引入

@import引入

asd.css 

div {
	color: antiquewhite;
}
p{
	color: blue;
}

html文件 



	
		
		
		
		
		
		
	
	
		
每天叫醒我的不是闹钟,是梦想!!!
每天叫醒我的不是闹钟,是梦想!!!
每天叫醒我的不是闹钟,是梦想!!!

钢铁侠

蝙蝠侠

蜘蛛侠

2.4、样式的优先级

就近原则: 行内样式 > 内联样式 == 外联样式 (后面覆盖前面) 。
注意事项: 今后尽量不要对同个html进行多个样式书写。
如何选择三种样式写法?
1、如果样式是固定并且不修改并且很少情况,行内样式。
2、如果样式针对当前html页面做的样式,并且量比较大的情况下, 内联样式。
3、如果你的样式是通用,如果你的css代码很多,外联样式,需要创建一个css文件,引入。

2.5、样式选择

三种样式引入方式,在实际开发过程中该如何选择?

1.如果是通用样式,就选择外联样式。

2.当样式内容过多时,也会将样式单独抽离成一个.css文件,方便管理。

3.当某个标签有特殊样式实现,且在页面中是不重复的,出现次数唯一的,就使用行内样式。

4.除了上面的几种情况,通常使用的都是内联样式。

3、CSS选择器

3.1、基本选择器

选择器可以快速、方便的选择所需要使用的页面元素。

基本选择器分三种:标签选择器、类选择器、id选择器。

标签选择器

语法:标签名{}

例如:div{color:red;font-size:20px;}



	
		
		
		
	
	
		
我是div1,我用的是class选择器
我是div2,我用的是class选择器和id选择器
我是div3,我用的是class选择器

我是p,我用的是class选择器

我是h4,我用的是class选择器

类选择器

类选择器是通过class属性进行元素的获取,可用于对多个元素进行相同的样式设置。

语法:.类名{}

例如:.div-cls{color:red;}

.div-cls{
	color: red;
}
.p-cls{
	color: green;
}
.h4-cls{
	color: blue;
}

id选择器

id选择器是通过id属性给元素一个唯一标识(设置多个id相同不会报错,会影响后期js的学习,建议id值要唯一)。

语法:#id名{}

例如:#div-id{color:red;}

/*id选择器:在标签上添加了一个id属性,作为唯一标识,通常不允许重复*/
#p-id{
	color: #483D8B;
}

3.2、属性选择器

属性选择器是根据元素上已有的属性标识进行选择

语法:[属性名='']{}



	
		
		
		
	
	
		
		百度链接
		新浪博客
		云和数据
	

3.3、层级选择器

后代选择器是根据元素在页面中的相对(嵌套)位置进行按区域选择元素。



	
		
		
	
	
	
		
		

我是div的兄弟

我是p标签中的span标签

跟班选择器

3.4、组合选择器

组合选择器是根据元素在页面中的同级关系进行选择。



	
		
		
		
	
	
		
div中的不带标签的内容 组合选择器,注意很常用

p标签中的span标签

h4标签中的span标签

3.5、伪类选择器

伪类选择器是css3中提供的用于快速查找元素的便捷选择器,开发中常用nth-of-type选择器。



	
		
		
		
	
	
		

百度新闻 新浪官网 云和官网 腾讯官网 人人编程官网

百度一下

3.6、通配符

*通配符,作用在页面中的所有标签上,开发不建议使用,影响网页的渲染性能。

*{
  color:red;
  font-size:20px;
}

开发不建议使用通配符,通配符相当于是作用在了所有的标签上,某些属性并不是所有的标签都能识别,只要加了属性不论是否生效,浏览器都会对属性进行解析然后渲染,这样比较消耗性能  

3.7、选择器优先级

网页中的选择器多种多样,可以组合使用,当同一个元素有多个样式时,最终生效的样式与优先级有关。

可以假设行内样式的优先级为1000,那么id选择器、类选择器、标签选择器的优先级大小如下所示

!important>行内样式>id选择器>类选择器>标签选择器

  无穷大       1000          100          10                1

4、CSS盒子模型

4.1、基础样式

样式名 描述
text-align 设置内容位置
text-decoration 控制下划线 none没有 underline有
line-hight 行高
font-size 设置字体大小
font-weight 设置字体粗细的
font-famliy 设置字体样式
letter-spacing 设置中文字体之间的间距
word-spacing 设置英文单词之间的间距

行高:设置单行文字所占据的高度,实际位置是文字的大小+上下的空白间距  



	
		
		
		
	
	
		
轻轻的我走了,正如你轻轻来了
轻轻的我走了,正如你轻轻来了

hello world java

我爱你中国

4.2、盒子模型

页面中的每个元素都可以称为盒子,主要目的是为了计算元素在网页中的实际占位,通过F12可以直观的查看到盒子模型。

4.2.1、边框颜色

border-color



	
		
		
		
	
	
		
我是盒子!

4.2.2、边框粗细

整体粗细:

border-width:20px;  整体边框

指定方位调整粗细:

border-top-width      上 

border-left-width      左

border-right-width    右

border-bottom-width   下



	
		
		
		
	
	
		
hello world!

4.2.3、边框样式



	
		
		
		
	
	
		
hello world!

4.2.4、边框的简写

	
    
	
	
		
hello world

4.2.5、外边设置

margin可以设置块元素的水平对齐方式

div{
  margin:0 auto;//让块元素在水平方向居中
}

	
	
		

学生列表

你好!同学

4.2.6、内边设置

padding-left调用文本与左边间距

padding-top调用文本与上边间距

padding-bottom调用文本与底部间距

padding-right调用文本与右边间距

.input{
    font-size:16px;
    background-color:#3a6587;
    height:35px;
    line-height:35px;
    color:#FFF;
    padding-left: 110px; 
    padding-top:10px ;   /* 让标题左边留点空隙*/
}

4.2.7、背景

属性名 说明
background-color 设置背景颜色
background-image 设置背景图片
background-position 设置背景图片的位置
background-size 设置背景图片的大小
background-repeat 设置背景图片是否重复
background-attachment 设置背景图片相对浏览器的定位位置
div{
  width: 1000px;
  height: 1000px;
  /* background-color: #008B8B;
  background-image: url(./timg.jpg);
  background-size: 50px 50px;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed; */
  background: #008B8B url(./timg.jpg) no-repeat;
}

4.2.8、display属性

属性名 描述
display:none; 隐藏元素
display:block; 将元素变为块元素
display:inline; 将元素变为行元素
display:inline-block; 将元素变为行内块元素

4.3、浮动

浮动是改变元素在文档流(元素默认从上往下布局的方式就叫文档流)中的规则,让元素可以在水平方向上进行排版。

float:left或者right

4.3.1、清除浮动



	
		
		
		
	
	
			
1
2
3
4
5
6
7
8
9

4.3.2、解决浮动塌陷问题



	
		
		
		
	
	
		
我是天空的一片云,偶尔投影在你的波心, 不必讶异,我是天空的一片云 我是天空的一片云,偶尔投影在你的波心, 不必讶异,我是天空的一片云 我是天空的一片云,偶尔投影在你的波心, 不必讶异,我是天空的一片云 我是天空的一片云,偶尔投影在你的波心, 不必讶异,我是天空的一片云 我是天空的一片云,偶尔投影在你的波心, 不必讶异,我是天空的一片云 我是天空的一片云,偶尔投影在你的波心, 不必讶异,我是天空的一片云

4.4、定位

浮动更多的用于对模块化(无具体像素值要求)区域进行整体排版,对于精确到像素值的页面调整需要使用定位,例如:购物车上的数量、消息通知等。

属性名 描述
position:relative; 相对定位(相对默认位置进行定位,不脱离文档流,仍占据页面位置)
position:absolute; 绝对定位(相对第一个带有定位属性的父元素进行定位,默认是浏览器)
position:fixed; 相对浏览器进行固定定位

4.4.1、相对、 绝对定位


		
		
		
	
	
		

4.4.2、固定定位

	
		
		
		
	
	
		

内容内容内容内容内容内容

内容内容内容内容内容内容

内容内容内容内容内容内容

内容内容内容内容内容内容

内容内容内容内容内容内容

固定定位

内容内容内容内容内容内容

内容内容内容内容内容内容

内容内容内容内容内容内容

内容内容内容内容内容内容

内容内容内容内容内容内容

内容内容内容内容内容内容

内容内容内容内容内容内容

内容内容内容内容内容内容

内容内容内容内容内容内容

内容内容内容内容内容内容

4.4.3、堆叠顺序

元素在进行定位时,会出现位置相同的情况,可以通过设置其堆叠顺序决定显示的优先级。        

z-index 数值越大越靠前

	
	
	
		
		
		

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

This is some text. This is some text. This is some text.

5、CSS3常见效果

5.1、圆角效果

控制盒子的四个角的弧度,语法:border-radius,控制的是元素的四个角的弧度,当弧度值大于或等于元素宽高的一半时,元素会变成一个圆。border-radius的值可以是百分比或者px像素。



	
		
		
		
	
	
		

5.2、透明效果

5.2.1、背景透明

背景透明只针对背景颜色进行透明。background-color:rgba(x,x,x,x) 透明度在0~1之间


	
	
			

5.2.2、整体透明

针对整个元素进行透明,包括该元素的所有子元素。opacity 透明度在0~1之间




		
百度一下

5.3、盒子阴影

box-shadow

对块元素添加阴影效果从而达到视觉效果上的立体感。

		
	
			

5.3.1、文本阴影

text-shadow

对文本添加阴影从而达到视觉效果上的立体感。

	
	
			

轻轻的我走了,正好我轻轻的来了

5.4、响应式效果

早期页面的开发,需要有前端人员、Android工程师和IOS工程师,因为PC端和移动端的屏幕大小差别比较大,需要针对PC端和移动端分别开发整套项目;从H5出现之后,前端人员在开发PC端可以通过技术将PC端的页面在IPAD和移动端上都进行自适应,因此前端就变得更加重要了。 自适应方式两种:响应式、弹性盒子;目前基本上所有用于前端页面开发的流行框架中都封装了响应式或弹性盒子的操作。

5.4.1、手机屏幕的适应

H5的出现可以让PC端的应用直接在手机端进行等比例使用,需要设置其视图模式。

5.4.2、页面自适应

对网页中的元素的大小,根据电脑屏幕的大小进行动态设置,从而达到一种响应式的效果。



	
		
		
		
		
		
		
		
			
			
	
	
	
			

你可能感兴趣的:(前端,css,前端)