初识CSS样式表（一）

css（cascading style sheets）美化样式

css通常称为css样式表或层叠样式表（级联样式表），主要用于设置HTML中的文本内容（字体、大小、对齐方式）、
图片的外形（宽高、边距、边框样式等）以及版面的布局等外观的显示样式。

css以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

Css样式表的书写位置：

内部样式表：

内嵌式的样式表是将代码集中写在HTML中的head头部文件中，并且用style标签定义，

语法如下：

<head>

     <style type=”text/css”>

      （选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3；}）

Eg：h4{

        ”color：pink；“

}

     </style>

</head>
语法：style标签一般放在title标签之后，也可以把它放在html文档中的任何一个位置。

选择器

（就是选择标签的，便于快捷的利用CSS）要想将CSS样式应用与特定的HTML元素，首先需要找到该目标元素，在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）

标签选择器：（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中的某一类标签指定统一的CSS样式。语法如下：

标签名{属性1：属性值1；属性2：属性值2；}
或
元素名{属性1：属性值1；属性2：属性值2；}

标签选择器最大的优点是能快速为页面中的同类型标签统一样式，同时这也是它的缺点，不能设计差异化样式。

标签选择器可以吧某一类标签全部选择出来：eg：div、span

类选择器

类选择器使用“ . “(英文字符)进行标识，后边紧跟类名，语法如下：

.类名{属性1：属性值1；属性2：属性值2；}
标签调用的时候 class=”类名“

类选择器最大的优点就是：可以为元素对象定义相同或单独的样式。

小技巧：

1：长名称或词组可以使用中横线来为选择器命名。

2：不建议使用“-“下划线来命名CSS选择器

（-tipd的选择器命名对IE6无效、良好区分js命名（js命名用“-“））

3：不要纯数学、中文等命名，尽量使用英文字母来表示

eg：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .suibian{
            color: pink;
        }
    </style>
</head>
<body>
    <div>类选择器</div>
    <div>类选择器</div>
    <div class="suibian ">类选择器</div>
</body>

外部样式表（外链式）:

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

基本语法如下：

<head>
     <link  href=”CSS文件路径” rel=”stylesheet“/>
</head>

Link标签是一个单标签

该语法中，link标签需放在head头部标签中，必须指定link标签的三个属性：

1：href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径
2：type：定义所链接文档的类型，在这里需要指定为“text、CSS“,表示链接的外部文件为CSS样式表:
3：rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet“，表示被链接的文档时一个样式文件。

行内式（内联样式）:（不常用）

是通过标签的style属性来设置元素的样式，语法如下：

<标签名 style=”属性1：属性值1；属性2：属性值2；”>

语法中style是标签的属性，实际上任何HTML都有style属性，用来设置行内式，其中属性和值得书写规范与css样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

三种样式表的总结：

常用的默认文本颜色：

style=”color：gray；“ 灰色

style=”color：#ccc；“ 淡灰色

设置文本大小：

font-size

初识CSS样式表（一）

猜你喜欢