CSS入门笔记

最新推荐文章于 2024-04-03 06:21:23 发布

helen_elva

最新推荐文章于 2024-04-03 06:21:23 发布

阅读量328

点赞数

分类专栏：前端测试文章标签： CSS 样式表

本文链接：https://blog.csdn.net/zhlelva/article/details/78981782

版权

前端测试专栏收录该内容

5 篇文章 1 订阅

订阅专栏

HTML之后接着学习CSS（Cascading Style Sheet 层叠样式表）。感谢http://www.w3school.com.cn/css/index.asp

1、定义

什么是CSS？--CSS是层叠样式表，就是让你专门设计和放置样式的地方。
在HTML中就可以有样式，为什么还需要CSS？--主要为了分开管理：1）一个样式，可以同时对多个网页外观格式；2）容易管理且逻辑简单，css只需要管理样式，不涉及内容，这样html只需要引入css和管理内容即可，逻辑清晰简单，容易维护；……

2、基础语法（CSS规则主要由选择器和声明构成，如 selector {declaration1;declaration2;}）

选择器：是需要改变样式的HTML元素。selector就是选择器。选择器有继承属性
声明：由一个属性和一个值组成。declaration1和declaration2就是声明。如h1 {color:red;font-size:14px;}
选择器类型：
选择器分组 h2,p {color:gray;}    是指 h2标题和p段落的颜色是灰色，两个在同一个选择器中设置
元素选择器   html {color:gray;}    是指对元素本身，进行设置

派生选择器

id选择器   #intro {color:gray;} 定义了id是intro的选择器，引用如 <p id="intro">...</p>

类选择器 .important {color:gray;} 定义了important类，引用如   <p class="important">…</p>

属性选择器 [title]{color:gray;} 是指含有title属性的会生效，引用如 <a title="Hello">...</a>

后代选择器 h1 em {color:gray;} 是指只有在h1元素中含有em元素时才能生效

子元素选择器 h1 > strong {color:gray;} 是指只有strong是h1的子元素时才能生效，若h1与strong之间还有其他元素间隔，则不生效

相邻兄弟选择器

伪类、伪元素
以上各种不同的选择器用法，目的是为了更简洁高效地控制你想要控制的元素格式。超级实用的实例：http://www.w3school.com.cn/example/csse_examples.asp

那么，如何在html中引用呢？
<head>
<link rel="stylesheet" type="texxt/css" href="mystyle.css" />
</head>