12-13笔记

来源:互联网 发布:农村淘宝店怎么申请 编辑:程序博客网 时间:2024/06/05 02:44

CSS加载的方式

1.引入外部文件

<link href="outer.css" rel="stylesheet" type="text/css"></link>

HTML文档中使用<link>元素引入外部样式文件,引入外部样式文件应在<head>元素中增加<link>子元素。

2.导入外部样式单

<style type="text/css">@import "../outer.css";@import url('outer.css');</style>

导入外部样式表单需要在<style>元素中执行@import进行导入。

3.使用内部CSS样式

一般来说我们不建议使用内部 CSS 样式:

  • 复用性小。
  • 导致HTML文档过大,会导致网络负载严重。
  • 修改整站风格时,需要对每个网页文件进行样式修改。
<style type="text/css">样式单文件定义</style>

4.使用内联CSS样式

内联样式只对单个标签有效,不会影响整个文件。

在 HTML 元素中使用 style 属性定义内联样式。

<div style="property1:value1;property2:value2;"/>

区块元素

  • 总是在新的一行上显示。

  • 高度、行高、宽度、内边距、外边距等都是可控制的。

  • 高度默认为0,是根据元素内的内容而决定的,宽度是父元素的宽度,但是可以通过css控制它,显示的指定他的宽度和高度,可以利用浮动和定位来将他与其他的块元素也显示在一行上。

  • 实例: <h1>,<p><ul>,<table>

内联元素

  • 内联元素和其他的元素显示在一行上。

  • 上下边距、高度,宽度都是不可改变的,他的宽度是根据他的显示文本和图像的宽度。

  • 实例: <b><td><a><img>

  • 通配符选择器

  • 使用"*"表示通配符,用来选择页面所有元素的样式。

    *{ margin:0;padding:0;}

    类选择器

    类选择器指定的样式对指定class属性的元素起作用。使用“.”标识一个类选择符,类名可以任意。

    .myclass{...}

    选择器

    ID选择器中的样式会对具有指定id属性的HTML元素起作用。

    HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。

    需要注意的是id在HTML文档中具有唯一性,是不可以重复的。

    #idValue{ ...}

    包含选择器

    包涵选择器用于指定处于某个选择器对应的内部元素。

    h1 em {color:red;}

    子选择器

    子选择器要求目标选择器必须作为外部选择器对应的元素的直接子元素。

    parent>child{width: 200px; height: 35px;}

    群组选择器

    群组选择器使用逗号对选择符进行分隔。

    我们可以将逗号读成“和”。

    h1,p,myClass,#main{font-size:20px;}


原创粉丝点击