最近在弄一个简单管理系统的前端，所以打算将做项目的一些个人感想以及总结简单罗列下，当然，主要针对前端的基础部分以及一些常用的前端个人简单技巧总结。主要分为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. Python 学习---------Ｄay5

    第十四章 文档 class employee: "class doumentation" pass print employee.__doc__ #注释会保存在__doc__属性中 ...

  2. EJB概念理解

    转自http://blog.csdn.net/jojo52013145/article/details/5783677 1. 我们不禁要问,什么是"服务集群"?什么是"企 ...

  3. C2第八次解题报告

    看过题解后如果觉得还算有用,请帮忙加点我所在团队博客访问量 http://www.cnblogs.com/newbe/ http://www.cnblogs.com/newbe/p/4069834.h ...

  4. selenium support

      org.openqa.selenium.support.ui.Select select = new org.openqa.selenium.support.ui.Select(driver.fi ...

  5. chrome浏览器root用户运行

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

  6. Yii2 性能优化 来源yii2官方文档

    优化你的 PHP 环境 使用最新稳定版本的 PHP . PHP 的主要版本可能带来显著的性能提升. 启用字节码缓存 Opcache(PHP 5.5或更高版本) 或 APC (PHP 5.4或更早版本) ...

  7. Oracle的update语句优化研究

    最近研究sql优化,以下文章转自互联网: 1.     语法 单表:UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 如:update t_join_situation s ...

  8. Mac OS X 常用快捷键

       

  9. innodb buffer pool相关特性

    背景 innodb buffer pool作为innodb最重要的缓存,其缓存命中率的高低会直接影响数据库的性能.因此在数据库发生变更,比如重启.主备切换实例迁移等等,innodb buffer po ...

  10. Java设计模式10：观察者模式

    观察者模式 观察者模式也叫作发布-订阅模式,也就是事件监听机制.观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象,这个主题对象在状态上发生变化时,会通知所有观察者对象,使他 ...