这是我参与「第五届青训营」伴学笔记创作活动的第 10 天。今天我们开始谈谈CSS技术,请大家多多指教!
【初识CSS】
-
HTML困境:使用HTML标签属性对网页进行修饰需要将所有的样式都写在标签中,此种方式存在着较大的不足,既不利于代码的阅读,又使将来的代码维护变得非常困难
-
CSS应运而生:我们希望页面美观、大方、维护方便,就需要使用CSS实现结构与表现的分离(结构与表现的分离体现在页面设计中)
-
HTML与CSS的互相配合:HTML只用于搭建网页的基础结构,所有样式交由CSS来设置
CSS
CSS是一用于增强控制网页样式并允许将样式信息与网页内容分离的标签性语言。在实际开发中,CSS主要用于设置HTML网页中的文本格式(字体、大小、对齐方式等)、图片的外形(宽度、边框样式、边距等)和版面的布局等外观显示样式
CSS定义
CSS定义的规则具体如下:
选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
选择器:用于指定CSS样式作用的HTML对象
属性:对该对象设置的具体样式
属性和属性值:以键值对“属性:属性值”形式出现,例如字体大小、文本颜色等,属性和属性值之间用“:”(英文)连接,多个键值对之间用“;”(英文)进行分隔
示例
下面通过CSS样式对<div>标签进行进行设置,具体示例如下:
div{border:1px solid yellow; width:600px; height:400px;}
在上述代码中,div作为选择器,表示CSS样式作用的对象;border、width和height为CSS属性,分别表示边框、宽度和高度,其中border属性有3个值,分别表示该边框为1像素、实心边框线、黄色。
【小结】
今天小小总结了我对CSS的一些认识,明天开始详细介绍。