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有一个大概了解,然后就是以后在实践中换个角度去了解它了.

相关文章
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
186 1
|
1月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
143 1
|
2月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day03-作业
本教程通过多个实例讲解JavaScript中for循环的常见用法,包括遍历数组、元素加1、求最大值/最小值、计算平均值、过滤偶数及字符串拼接等操作,并附有代码示例和运行结果图。
58 3
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
2月前
|
前端开发 JavaScript 算法
HTML/CSS/JavaScript基础学习day03-作业
本内容包含多个 JavaScript 编程示例,涵盖数组遍历、条件筛选、字符串处理、数值计算等常见操作,适合练习基础算法与逻辑思维。
84 5
|
3月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day01
阿铭学习HTML基础,包括VSCode快捷生成代码、常用标签如head、title、body、img、a、p等的使用,以及CSS选择器的优先级和基本样式设置,适合前端入门学习。
167 12
|
2月前
|
前端开发 JavaScript
HTML/CSS/JavaScript基础学习day02-作业
本教程介绍了JavaScript基础编程练习,包括使用for循环打印数字、判断奇偶数、计算总和以及用if语句判断正数的方法。每部分均配有示例代码和运行结果图,帮助初学者理解循环与条件判断的应用。最后通过思维导图回顾所学内容,强化知识点记忆。
67 2
|
3月前
|
XML 人工智能 前端开发
HTML/CSS/JavaScript基础学习day02
阿铭学习day02内容涵盖VSCode常用插件安装与配置,如中文语言包、路径提示、Vue开发工具等,同时介绍了通义灵码AI编程助手的使用方法,提升开发效率。
63 1
|
2月前
|
前端开发 JavaScript 索引
HTML/CSS/JavaScript基础学习day04
阿铭学习JavaScript函数与对象的基础知识,包括函数定义、调用方式及参数使用,以及Array和String对象的常用操作。
81 0