theme: channing-cyan
highlight: atelier-dune-light
这是我参与「第四届青训营 」笔记创作活动的第2天
基础
CSS是什么?
CSS(层叠样式表)英文全称为Cascading Style Sheets,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化
CSS的功能?
主要是用来修饰网页、使网页具有美观性和实用性,提升用户的体验感。能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力
修饰网页
- 用来定义页面元素的样式
- 设置字体颜色
- 调整位置和大小
- 添加动画效果
网页排版
使用css能够对页面进行盒型的排版,可以自定义风格。
CSS的语法?
选择器指向您需要设置样式的 HTML 元素。
声明块包含一条或多条用分号分隔的声明。
每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。
多条 CSS 声明用分号分隔,声明块用花括号括起来。
css 选择器{ 属性:属性值; 属性:属性值; } //举例: h2 { color: block; text-align: center; }
CSS的使用
再页面中如果要使用CSS,有三种方法。
外链式
通过一个link标签引入css文件
html <link rel="stylesheet" type="text/css" herf="/CSS文件路径">
嵌入式
html <style> p { color:red; border:blue 1px solid; } </style>
内联式
内部使用style属性
```html
```
CSS选择器
CSS 选择器用于“查找”(或定位选取)要设置样式的 HTML 元素。
简单选择器
通过属性、id、class来选取元素
标签
css //所有p元素都适用 p { text-align: center; color: red; }
id选择器
id命名不能以数字开头。举例: id="junjinId" ```css //通过id特定的html元素适用
junjinId{
color: red; } ```
类选择器
类选择器选择有特定 class 属性的 HTML 元素。 举例:class="myClass" css .myClass{ color:black; }
通配选择器
css //适用于所有HTML元素 *{ color:balck; }
组合选择器
伪类选择器
伪类选择器对字母大小写不敏感,且可以和类选择器结合使用。
语法: css selector:pseudo-class { property: value; }
举例: ```css a标签: /* 未访问的链接 */ a:link { color: #000000; }
/* 已访问的链接 */ a:visited { color: #FFFFFF; }
/* 鼠标悬停链接 */ a:hover { color: #FF00FF; }
/* 已选择的链接 */ a:active { color: #0000FF; } ```
其他选择器
还有不常用的伪元素选择器和属性选择器。
颜色、透明度、亮度等调节···
颜色
颜色通过RGB/HSL(色相/鲜艳度/亮度)/alpha(透明度)调节。
字体
css拥有font-family,可以进行各种字体。font-size可以调节字体大小····
检查
我们可以在浏览器通过右键检查来调试、观看css等,能够快捷的调整自己网页的css。
总结
青训营CSS基础的讲解对我有着巩固性、启发性、查漏补缺性的知识补充。让我拾起了久违的前端以及对前端产生更加浓厚的兴趣。