笔记 - 10.1、HTML - CSS概念笔记

2022-02-24 06:06:03

使用CSS（Cascading Style Sheet）样式表。（**********）

--使用CCS：
   CSS语法结构的组成：（选择符、样式属性、属性值）
       选择符｛样式属性:属性值;样式属性:属性值;样式属性:属性值;...｝

·选择符（Selector）：指这组样式编码所要针对的对象，可以是一个XHTML标签，如       body，h1，也可以是定义了id属性或者class属性的标签，如#lay选择符表示       选择<div id="lay"></div>，即是一个被指定了lay为id的对象。浏览器将对       CSS选择符进行严格的解析，每一组样式均会被浏览器应用到对应的对象上。
·属性（Property）：是CSS样式控制的核心，对于每个XHTML中的标签，CSS都提供了       丰富的样式属性，如颜色，字体，大小，定位，浮动等等。。。
·值（Value）：是指属性的值，形式两种，一种是指定范围的值，如float属性，只能       使用left、right、none这三个值。另一种为数值，如width属性的值能够使       用0~9999px，或者是其他的数学单位（cm,m...）来指定。

--添加CSS样式的方法：
4种方法：
1.链接外部样式表：css是一个单独的css文件
   就是链接一个css文件，使用<link />标签
   eg: <link href="css文件路径" rel="stylesheet" type="text/css"/>
   其中：href属性和rel属性必不可少，rel属性的值必须是stylesheet
   注意：链接外部样式表，<link />标签必须写在<head></head>标签之间。

2.内部样式表
   一般位于HTML文件的头部，<head></head>标签之间。并且以
   <style type="text/css">开始，</style>结束，style标签有一个type属性，值只能是text/css。样式就写在这一对标签之间，这些样式就可以应用到页面上。
   eg：
   <head>
       <style type="text/css">
           body {background-color:red;}
       </style>
   </head>


3.导入外部样式表
   是指在内部样式表里的<style>标签里导入一个外部样式表，导入时用
   @import css文件路径
   eg:
       
   注意：使用时注意外部样式表的路径、方法和链接外部样式表的方法类似，但是导入外部样式表输入方式更有优势，导入外部样式表实质上相当于把样式存在于内部样式表。

4.内嵌样式：就是直接写在HTML标签内部的样式，成为内嵌样式。
   写法：在HTML标签内部加上一个style属性，style属性的值就是样式；
   eg:<div style="background:red; font-size:20;"></div>
   样式值的写法与上述三种方式写法相同。

----- 经验：做网页的时候，用的最多的是链接外部样式表，其次是内部样式表，在其次内嵌样式，最后是导入外部样式表。
   链接外部样式表，是一个单独的文件，便于以后项目的维护，减少了HTML
档中的内容，使得代码更加清晰。
   内嵌样式，写在HTML标签中，只对当前这个HTML标签起作用，无法发挥样式
表的优势，样式表的优势就是一个样式可以控制多个元素为相同的样式。所以内嵌样式少用。
   导入外部样式表，早期浏览器不支持该方法。所以不用。

总结：使用CSS的最常用的方法就是：链接外部样式表，其次内部样式表。导入外部样式表不用，内嵌样式少用。

码农公寓

相关文章