最近在弄一个简单管理系统的前端，所以打算将做项目的一些个人感想以及总结简单罗列下，当然，主要针对前端的基础部分以及一些常用的前端个人简单技巧总结。主要分为js部分和css部分，下面是css的基础部分总结

　一、基础知识

　　1、前端基本概念以及常识

　　　　web应用，主要分为前端和后端，而前端的话，主要是想用户展示内容，后端的话主要是处理用户数据。前端内容呈现中，主要有几个问题：内容是什么？如何展示内容？如何展示页面的行为？内容是什么是通过html来标记的，内容如何呈现是通过css改变和调整的，页面的前端行为则是通过js来控制。html和js这里不详解，主要这里说说css。

　　　　css，可以理解为页面格式，格式和内容的分离，使得html文件大小缩小，条理清晰，格式可以多次利用，这里和MVC模型有同工异曲。反正，css，用个人通俗的话语理解，就是拿来调节页面格式的一种规则，这种规则可以同时作用于多个页面，一次加载多次利用毫无疑问地使得网页文件大小大大缩小，同时，页面可以统一风格，调节页面也可以统一调节，方便高效。

　　　　然后，css的学习，个人的拙见就是：看完基本规则语法，就开始干活，不懂去W3Cschool查资料，然后，做了一定页面后看本系统的css说明书籍，带着问题去本有系统的书籍会收获很多，然后在继续实践。好了，废话说了那么多，进入干货总结环节。

　　2、css编写的一些习惯（这里看不懂或者不认同的就算了，毕竟只是个人拙见而已，不感兴趣可以直接跳过的）

　　　　a、可以用css调样式的地方，就不要用html属性（html属性具体是什么各位百度去吧）

　　　　b、先布局，再确定具体样式，个人觉得，合理的布局才是最重要的。

　　　　c、css有继承关系，所以，尽量在开工前将公共的样式抽出来先。

　　3、css内容

　　　　css的话，个人觉得学习分三part:页面布局，具体样式调整以及前端框架的使用。前两个的话是基础，后面的框架只是集成的一些类，可以提高工作效率。学习路线的话作为菜鸟的我不敢给什么意见，不过我的学习方式是大概对前两者有个概念之后，便开始着手去用前端框架了（毕竟是实际开发，讲求效率），在用框架的过程如果发现自己哪部分基础不了解不扎实的话回头再回顾。

二、css基础

　　好了，上面讲了一大坨话，下面就正式进入主题啦，其实网上也有很多css的基础总结，本人也只是将个人对编程的一些理解说出来而已，重复造轮子是避免不了的，但是有那么一点收获，便是值得的。

　　1、html的一些常识

　　　　恩，会用css的前提必须是有一定的html基础，先简单粗暴地讲解下一些和css密切相关的html的一些知识吧，具体的html只是还是需要各位百度谷歌去的。

　　　　html节点：一个html文档中标签间的关系，可以形象地比喻为一颗树中各个分叉节点的关系：每个标签之间有嵌套关系，被嵌套的标签是上一级的子节点，依次类推。

　　　　clss属性：html中，每个标签都有clss属性，多个html节点可以有多个相同的clss属性，class属性，个人理解就是html节点拥有的样式的一种说明方式。由于class的意思就是这个标签所拥有的样式，所以肯定是可以多个的，看一下代码估计你也明白了：

<html>

    <head></head>

    <body>

        <p class="test"></p><!--clss就是表现了一个标签有某个样式的东东-->
　　　　　<p class="test1 test2"></p><!--class可以有多个值，两个不同类之间用空格隔开-->
</body> </html>

　　　　ID属性：id ,是一个html节点对无二的标记，即正常情况下一个节点只是对应一个id,一个id 一般也是只是对应一个html节点（当然，一个id对应对个节点也不会出错，只是浏览器解析时只会识别第一个节点的id），具体看代码

<html>

    <head></head>

    <body>

        <p id="test"></p><!--id和html节点对应关系是一对一，每个id一般只是对应一个html节点-->

　　　　　

</body> </html>

　　2、选择器

　　　　选择器，其实就是选择页面中你要修改的哪一部分的一种规则，可以利用选择器对文档进行选择，进而进行样式的调整。css的基本结构便是：选择器+对应内容的样式说明，格式如下：选择器{样式说明代码}

　　　　具体的，上代码吧：

/*选择器*/

.class1{

    /*这是一个类选择器，中括号里面可以填写选中内容的相应样式*/

    font-size:20px;/*font-size是一中css属性值，具体后面会介绍表示。所有拥有类名为class1的节点字体大小为20px*/

    /*类选择器以以个"."开头加类名字构成*/

}

#id1{

    /*这是一个id选择器，它由"#"和id名称构成*/

    font-size:20px;/*类似的，这里表示拥有id名为id1的节点字体大小为20px*/

}

[title]{

    /*属性选择器，表示选择具有title属性的标签节点*/

    font-size:20px;

}

p {

    /*这个也是一个选择器，表示选择所有p 标签的节点,单纯由标签名字组成*/

    font-size:20px;

}

　　　　大概，各位对选择器的基本知识也多了解了吧，接下来，简单说说怎么用选择器吧

　　2、选择器的使用

　　　　在前面中，我们都是一个选择器一个选择器的单独使用的，单独使用的话，选择的文档就显得比较粗糙不精确了。因此，各种选择器之间可以组合起来使用，具体的话，请看代码吧：

/*选择器的组合使用*/

.class1 p{

    /*类选择器+普通选择器，表示所有拥有class1 的<p>标签节点*/

    font-size:20px;

}

p .class1{

    /*等效于上面的代码*/

    font-size:20px;

}

#id1 p{

    /*id选择器+id1 的<p>标签节点*/

    font-size:20px;

}

p .id1{

    /*等效于上面的代码*/

    font-size:20px;

}

head [title]{

    /*有title的head标签节点*/

    font-size:20px;

}

　　当然，以上只是简单的组合使用，更详细的组合使用以及选择器可以参考下一篇css基础二

　　下一篇博客将会继续简单总结下css高级的选择器以及布局的基本知识。

css基础总结一的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. CSS基础总结

    CSS基础总结链接地址:http://segmentfault.com/a/1190000002773955

  3. CSS基础篇之了解CSS和它的基本属性

    CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...

  4. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  5. css 基础---选择器

    1.css基础 selector {property: value} eg: h1 {color:red; font-size:14px;} p { text-align: center; color ...

  6. 妙味课堂——HTML+CSS基础笔记

    妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...

  7. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  8. css基础不扎实

    写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...

  9. CSS基础教程 -- 媒体查询屏幕适配

    响应式布局 Media Query 的使用方法 在上例中, 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式.通过不同的媒体类型和条件定义样式表规则,媒体查询让CSS可以更 ...

随机推荐

  1. Ubuntu 中 不显示WIFI解决方法

    先用有线接到网络,打开终端,执行以下命令sudo apt-get update sudo apt-get install --reinstall bcmwl-kernel-source 执行成功即可看 ...

  2. iOS-延时操作汇总

    在iOS开发中,一个操作我们希望不要立刻执行,而是等上几秒之后再来处理,这时我们就需要延时处理,我们来看看这些方 1.最直接的方法performSelector:withObject:afterDel ...

  3. 关于原生JS获取类相关的代码

    <script> var FungetElementsByClassName = function(str,root,tag){ if(root){ root = typeof root ...

  4. VIM使用（三）

    Vim自动补全神器:YouCompleteMe Ubuntu下,先通过Bundle安装插件: Bundle 'Valloric/YouCompleteMe'Bundle 'scrooloose/syn ...

  5. 第54讲：Scala中复合类型实战详解

    今天学习了scala的复合类型的内容,让我们通过实战来看看代码: trait Compound_Type1trait Compound_Type2class Compound_Type extends ...

  6. Java学习笔记二——标识符和关键字

    标识符 定义 标识符的定义:对各种变量.方法和类等要素命名时使用的字符序列成为标识符. 简单地说,就是凡是自己可以起名字的地方都叫标识符,都要遵守标识符的规则. 命名规则 标识符只能由字母.下划线&q ...

  7. Python成长笔记 - 基础篇 （十）

    本节内容 进程.与线程区别 python GIL全局解释器锁 线程 语法 join 线程锁之Lock\Rlock\信号量 将线程变为守护进程 Event事件 queue队列 生产者消费者模型 Queu ...

  8. 各廠商ERP系統架構圖連結 (ERP流程圖)(轉)

    各廠商ERP系統架構圖連結 (ERP流程圖)   資料來源 Google圖片搜尋ERP整理而來 資通電腦 ArgoERP 資通電腦 Oracle ERP 鼎新電腦 Workflow ERP鼎新電腦 S ...

  9. .NET环境下导出Excel表格的两种方式和导入两种类型的Excel表格

    一.导出Excel表格的两种方式,其中两种方式指的是导出XML数据类型的Excel(即保存的时候可以只需要修改扩展名为.xls)和真正的Excel这两种. using System; using Sy ...

  10. chrome浏览器root用户运行

    vim /usr/bin/google-chrome 58 exec -a "$0" "$HERE/chrome" "$PROFILE_DIRECTO ...