css基础总结一

时间：2022-09-02 21:33:42

　　最近在弄一个简单管理系统的前端，所以打算将做项目的一些个人感想以及总结简单罗列下，当然，主要针对前端的基础部分以及一些常用的前端个人简单技巧总结。主要分为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 -入门 &lpar;---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&plus;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. yeoman（转）

    前言有一种技术可以提高我们的工作效率,可以让我们专心做我们擅长的事,可以屏蔽复杂性,可以规范我们的架构和我们的代码,可以让我们的享受编程的乐趣.Yeoman可以做到. 很多年以前,rails刚刚出世, ...

  2. lua实现深度拷贝table表

    lua当变量作为函数的参数进行传递时,类似的也是boolean,string,number类型的变量进行值传递.而table,function,userdata类型的变量进行引用传递.故而当table ...

  3. Android编译报Errors running builder &&num;39&semi;Android Pre Compiler&&num;39&semi; on project &&num;39&semi;XXX&&num;39&semi; java&period;lang&period;NullPointerException

    编译android时,遇到报错:Errors occurred during the build.Errors running builder 'Android Pre Compiler' on pr ...

  4. RMAN备份与恢复实例

    1. 检查数据库模式:   sqlplus /nolog    conn /as sysdba   archive log list (查看数据库是否处于归档模式中) 若为非归档,则修改数据库归档模式 ...

  5. PDO&lpar;PHP Data Object&rpar;数据访问抽象层

    1.可以访问其它数据库2.具有事务功能3.带有预处理语句功能(防止SQL注入攻击) 访问数据库 PDO::__construct ( string $dsn [, string $username [ ...

  6. Lombok 使用小结

    Lombok 简介 Lombok 是一种 Java 实用工具,可用来帮助开发人员消除 Java 的冗长,尤其是对于简单的 Java 对象(POJO).它通过注释实现这一目的.通过在开发环境中实现 Lo ...

  7. iOS实现 webView loadHTMLString加载外部css、js样式

    记录一下. webview(或wk)用 loadHTMLString加载内容时 ,如果只是单纯的html内容,样式等都写在内部,直接设置baseURL为nil即可. 不过当html里包含外部样式或调用 ...

  8. design

    type Config struct { Item lock } func (*Config) getItem(){ } func (*Config) SetItem(){ } channel : - ...

  9. BugkuCTF web基础&dollar;&lowbar;POST

    前言 写了这么久的web题,算是把它基础部分都刷完了一遍,以下的几天将持续更新BugkuCTF WEB部分的题解,为了不影响阅读,所以每道题的题解都以单独一篇文章的形式发表,感谢大家一直以来的支持和理 ...

  10. XML&period;libXml2&lowbar;ZC

    1.字符串比较函数: xmlStrcmp(...) 这是大小写敏感的比较 xmlStrcasecmp(...) 这是大小写不敏感的比较(忽略字符串里面字符的大小写) 2.查找节点 2.1.循环 2.2 ...

相关文章