CSS学习总结一

简介: 继承运用:只给HTML父项设置格式,其所包含的子项也会有相应的属性,要想单个控制,那么就给每个项加class属性,实现一对一控制。

  将CSS学习完了,大概总结一下,进行一个宏观的提升以及知识点的把控.


第一章:基础知识


1、标记


  例如:<h2>标题内容</h2>


2、CSS控制页面:


          优先级别:  行内样式 > 链接式 > 内嵌式 >  导入式

  行内样式:用Style标记直接写在中间


20151224155130253.png


  内嵌式:将CSS写在<head>与</head>之间,并且用<style>和</style>标记声明


20151224155158427.png


  链接式:CSS从HTML中分离出来,将CSS独立一个文件夹,然后在HTML中的<head>和</head>之间写<link href="1.css" type="text/css" rel="tylesheet">其中的1.css是CSS分离出来存放的文件夹的名字;到时候在HTML中添加CSS的时候可以直接将CSS存放的文件夹拖着放到HTML的<head></head>之间,就会自动生成上面的链接

  导入式:采用@import url(1.css)或者@import "1.css"进行导入,存放在<style>与</style>标记之间


第二章:CSS的基本语法


1、CSS选择器:


  标记选择器: P、h1


20151224155221838.png


  类别选择器:


20151224155234875.png


  ID选择器:


20151224155259367.png


  选择器声明:


20151224155322795.png


2、CSS继承:


  父子关系:


20151224155605802.png


  继承运用:只给HTML父项设置格式,其所包含的子项也会有相应的属性,要想单个控制,那么就给每个项加class属性,实现一对一控制。


第三章:文字效果


1、文字样式:


  字体:通过其中的Font-family控制

  大小:font-size控制

  颜色:color控制

  粗细:font-weight控制

  斜体:font-style控制

  下划线、顶划线和删除线:text-decoration控制

  字母大小写:text-transform控制


2、段落文字:


  水平对齐方式:text-align控制

  垂直对齐方式:vertical-align控制

  行间距和字间距:line-height控制

  首字下沉:float控制


第四章:图片效果


1、图片样式:


  边框:<img>标记的border属性

  缩放:width和height(可以加入值)

  对齐:

    横向:text-align

    纵向:vertical-align


2、混排:


  文字环绕:float(left,right)

  图片文字间距:padding属性


第五章:设置网页中的背景


1、背景颜色:


  页面:body标记的background-color属性

  背景色进行页面分块


2、背景图片:


  页面:background-image:url();

  重复:background-repeat:repeat-y(垂直方向)

  位置:background-position : 30px 25px;

  固定:background-attachment:fixed;

  多背景:添加table和div来实现


3、样式综合设置:


20151224155626710.png


总结:


   学习完了之后,感觉有好多的东西,并且也体会到了CSS深奥之处,瞬间对它的仰慕高了许多,但是总是感觉脑海中不是那么清楚,总结了一半的内容,就清楚了许多,相信等我将后面的部分总结完之后肯定会对CSS有一个大概了解,然后就是以后在实践中换个角度去了解它了.

相关文章
|
XML 编解码 前端开发
css核心知识学习
css核心知识学习
67 0
|
5月前
|
前端开发
5.CSS学习(浮动)
【7月更文挑战第29天】
40 4
学习CSS3 中的渐变、阴影与遮罩
CSS3的渐变、阴影和遮罩特性极大地丰富了网页设计。渐变让颜色平滑过渡,赋予页面流动美感;阴影增加元素立体感,引导视觉焦点;遮罩通过隐藏或显示部分元素创造独特视觉效果。这些特性组合使用,可打造丰富多彩、立体生动的视觉体验,并可通过CSS3动画增强动态效果,使网页更具活力。正确应用这些特性需考虑参数调整及跨浏览器兼容性,以确保最佳展示效果。
|
3月前
|
前端开发
|
3月前
|
Web App开发 移动开发 自然语言处理
|
5月前
|
前端开发
学习css的clip-path属性
【7月更文挑战第1天】了解CSS `clip-path`属性,用于定义元素显示区域的裁剪形状,如圆形、椭圆、多边形、矩形及SVG路径。通过配合过渡和动画,可创建动态交互效果。例如,`clip-path: circle(radius at center);`用于创建圆形裁剪,`polygon`用于自定义多边形。还可以使用`path()`引用SVG路径数据。[资源推荐:bennettfeely.com/clippy/](https://bennettfeely.com/clippy/),提供交互式工具测试不同形状。
99 0
学习css的clip-path属性
|
5月前
|
前端开发 JavaScript 开发者
学习CSS动画的高级技巧
【7月更文挑战第1天】学习CSS动画的高级技巧
51 2
|
5月前
|
前端开发 JavaScript 开发者
如何学习CSS动画?
【7月更文挑战第1天】如何学习CSS动画?
37 1
|
7月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
246 0
|
7月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
94 0