【牛腩新闻发布系统】——CSS学习

牛腩的第19集开始讲CSS相关内容,也离真正的网页制作迈进了一大步。这里简单介绍一下CSS的基本内容

与核心内容。


度娘的说法


CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件

样式的计算机语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持

几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示

最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读

性。


我的认识


在学习CSS的两集视频里介绍了基础内容与核心内容,现在就针对这两方面进行:


1、基础内容


先说CSS的特点:实现网页内容与样式的分离。为的就是在大型项目中,将网页的主要样式写在CSS里,

从标题到内容都可以进行分别设置,让整个网页显示一致化。像我们现在正在开发的ITOO,就是很明显的例子。为

什么每个功能的界面都是一致的,当然设计到的内容肯定不止CSS一种方法,但是CSS也是做的重要贡献的。

然后是CSS的特色:选择器。按照优先级来说:ID选择器 > 类选择器 > HTML标签选择器。那么他们分别

是什么,拥有怎么的规则?

ID选择器:通过在CSS里设定

#aaa {
    border :1px solid #100;
    padding :5px;
}
在HTML网页里调用id为aaa就行了。

<span id="aaa"> 栏目一</span>

类选择器
:在CSS设定

.title {
    color :#00f;  /*新闻标题样式*/
    clear:left; /*清除浮动*/
}

在HTML网页里调用

<span class="title" > 栏目一</span>

HTML标签选择器
:指在HTML中,除了拥有ID选择器和类选择器设置之外的内容,如下:
<pre name="code" class="html"> <span id="aaa">栏目一</span>
 <span class="title" > 栏目二</span>
 栏目三


在上述的代码中,只有“栏目三”没有特殊的选择器设定,所以它属于标签选择器,只要在CSS中的body中

设置相应的样式就能让栏目三也拥有特殊的样式。

body {
    color:#f0f;
}
注意:在这里提示一下,因为三者的优先级关系,所以只要有冲突,会以优先的选择器中的内容为

准。


核心内容


CSS的核心内容有:标准流,盒子模型,浮动和定位。拓展的内容有块级元素和行内元素。

这里分别描述核心内容的意义:

1、标准流:就是在CSS中的标签的先后顺序。

body {
    color:#f0f;
}
.menu {
    color :#f00; /* 文字颜色*/
}
.title {
    color :#00f;  /*新闻标题样式*/
    clear:left; /*清除浮动*/
}
如上述内容中title内容要后于menu,所以如果出现

<span class="title class=menu" > 栏目二</span>
那么就先以menu中的内容为主。

2、盒子模型:拥有外边距:上、下、左、右;内边距内容区:宽、高;画框:宽的一种页面设计

一张图说明盒子模型:

技术分享

所以在CSS中针对相关属性设值就行了。

3、浮动和定位:都是对盒子的位置进行调整的。

浮动:能使盒子的位置进行左、右移动。

定位:能使盒子的相对和绝对位置产生变化。

4(拓展)、块级元素与行级元素。

块级元素会独占一行,其宽度自动填满其父元素宽度。

行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素
的内容而变化

而且行级元素是可以向块级元素变换的,这个就不细说了。



总结


通过对CSS的学习,感觉它的作用还是挺强大的,在接下来的网页制作中再慢慢体会它的好~

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。