这是我参与「第五届青训营 」笔记创作活动的第2天,主要学习CSS的使用
一、本堂课重点内容
1.CSS基本原理
2.选择器、继承、布局介绍
3.
二、知识点总结
1.全称:Cascading Style Sheets 层叠样式表 定义页面元素样式(字体、颜色、位置、大小、动画…)
2.选择器基本构成:
3.在页面中使用CSS有哪些方式:
①外链:旨在将内容与样式分离,把样式写在外部文件。一般写在head标签内
如:<link rel="stylesheet" href="../style.css">
②嵌入:以元素类型、类名、id等为分类标准,设置各自的样式。写在head标签内
如:
③内联:在元素中以属性方式设置该元素样式
如:<h1 style="margin-bottom:0;text-align: center;">个人信息</h1>
4.CSS如何工作?
5.选择器Selector 使用多种方法选择元素:标签名、类名、id、属性、DOM树中的位置。
用在嵌入方法中,即使用style标签:
①通配选择器:*{color:red;} [全选]
②标签选择器:h1{color:red;} [只选h1标签]
③id选择器:#logo{color:red;}[选择元素id为"logo"的]
④类选择器:.done{color:red;}[选择类为"done"的]
常用类选择器,因为不可能给每一个元素都设置不同id,使用标签选择器会有多个重复
⑤属性选择器:[disabled]{color:red;}[选择元素中有属性名为disabled的]
==>>属性也可以指定具体的值,或者指定模糊匹配的条件,如开头等于什么,结尾等于什么。如:
input[type="password"]{color:red;}
a[href^="#"]{color:red;}
a[href$=".jpg"]{color:red;}