首页 > 代码库 > css基础总结一

css基础总结一

2024-08-22 07:58:46   222人阅读

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


联系
我们