CSS的基本使用

内联(行内)样式：inline style

使用 style=“属性名:属性值; 属性名:属性值;”

<h1 style="font-size:50px;color:red;">网页的标题</h1>

文档样式表：document style sheet

选择器 {属性名:属性值;}

开发网页特性：结构和样式分离

<style>
    h1,p {
        font-size:50px;
        color:red;
    }
</style>

选择器：

统配选择器：*

<style>
    * {
		color: red;
	}
</style>

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

<style>
    div {
        color: red;
    }
    
    p {
        color: green;
    }
</style>

类选择器：

<style>
    .box1 {
        color: red;
    }
    .box2 {
        color:blue;
    }
    .large-font {
        font-size:25px;
    }
</style>
<body>
    <!---一个元素可以有多个类，多个类以空格进行分割 -->
    <div class="box1 large-font">文字内容1</div>
    <p class="box2">文字内容2</p>
</body>

id选择器

<style>
    #header {
        color: red;
    }
    #content {
        color: green;
    }
    #footer {
        color:blue;
    }
</style>
<dody>
    <div id="header">头部</div>
    <div id="content">内容</div>
    <div id="footer">尾部</div>
</dody>

强调：id用于整体布局划分，id名称同一个页面中不要重复（代码规范）

属性选择器(不常使用)

<style>
    /*渲染属性为title的元素*/
    [title] {
        color:#f00;
    }
    
    /*渲染属性值为  one div元素  的元素*/
    [title="one div元素"] {
        font-size: 25px;
    }
    
    /*渲染title中包含one单词*/
    /*[title*="one"] */
    
    /*title以one开头*/
    /*[title^="one"] */
    
    /*title以one结尾*/
    /*[title$="one"]*/
</style>
<body>
    <div title="one div元素">我是div元素</div>
    <p title="p元素">我是p元素</p>
    <p title="p one">我是p元素</p>
    <p>我也是P元素</p>
    <span title="one span元素">我是span元素</span>
</body>

后代选择器：
```
div p span {
	color:red;
}
```
渲染div元素嵌套的p元素下面的span元素
子代选择器：
```
div>span {
	color:red;
}
```
渲染div元素里面的直接span子元素（不包含间接子元素）
相邻兄弟选择器
```
div+p {
	color: red;
}
```
div元素后面紧挨着的p元素(且div、p元素必须是兄弟关系)
全体兄弟选择器
```
div~p {
	color: red;
}
```
div元素后面的p元素(且div、p元素必须是兄弟关系)
交集选择器
```
div.one {
	color: red;
}
```
同时符合2个条件的元素：div元素、class值是one
并集选择器
```
div, .one, [title="text"] {
	color:red;
}
```
只要满足其中一个条件就会被渲染

外部样式表：external style sheet

当使用样式过多时，将所有样式放入一个后缀名为.css的文件，然后在html文档中引入即可
- 当样式中涉及中文时：在css文件中加入 @charset “utf-8”;
- 在html文件中引用：
  
  通过link引入
  - ```
  <link rel="stylesheet" href="css文档的路径">
```
  link元素除了可以用来引入CSS文件，还可以设置网页的图标（href的值是图表链接）
```
  <link rel="icon" type="image/x-icon" href="http://www.jd.com/favicon.ico">
```
  - link元素的rel属性不能省略，用来指定文档与链接资源的关系
  - 一般rel若确定，相应的type也会默认确定，所以可以省略type
  - 网页图标支持的图片格式是ico、png，常用大小是16x16、24x24、32x32(单位：像素)
通过@import引入
- ```
<style>
    @import url(css文档路径)
</style>
```

coder-lxy

发布了33 篇原创文章 · 获赞 0 · 访问量 398

私信关注

引入CSS的三种方式

CSS的基本使用

内联(行内)样式：inline style

文档样式表：document style sheet

外部样式表：external style sheet

猜你喜欢