CSS 介绍

简介: CSS介绍

原文链接:https://note.noxussj.top/part1/css3/css.html?source=aliyun

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets),理解为 CSS 样式就可以了。CSS 样式有什么作用呢?比如我们在页面中添加了一个 div ,我想给这个 div 设置宽度、高度、背景色、阴影、内容字体样式等等,就是通过 CSS 样式来实现。也就是丰富 HTML 标签的样式。

现实生活举例,body 里面的所有标签就像是不同的一个人,每个人的特征都不同。style 里面定义的每一个 .xxx 样式,就代表买了一件衣服。这个衣服你可以给任何一个人穿,也就是可以给任何一个标签使用。这个标签穿了衣服就会变得更好看。一个人可以穿多件衣服,也可以多个人穿同一件衣服。


CSS 结构

<html>    <head>        <title>我是网站标题</title>        <style>            .my-content {
                font-size: 30px;
                color: red;
            }
        </style>    </head>    <body>        <divclass="my-content">我是一个人,我穿了一件红色衣服(my-content)</div>    </body></html>

在演练场中操作一下


CSS 语法

语法规则:选择器 + 类名 + 样式体

例如:.my-content {}

解析:. 代表类选择器、 my-content 代表类名、{} 样式写在里面


颜色模式

CSS 中定义颜色使用十六进制( hex )表示法为红,绿,蓝的颜色值结合。可以是最低值是 0 ( 十六进制 00 )到最高值是 255 ( 十六进制 FF )。

模式名称 写法 简写
十六进制 HEX #aabbcc #abc
RGB rgb(170, 187, 204)
RGBA rgba(170, 187, 204, 0.5)


相关文章
|
前端开发
|
存储 并行计算 前端开发
CSS Transitions(一)
CSS Transitions(一)
|
前端开发 安全 容器
CSS(2)
在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的。 复合选择器可以更准确、更高效的选择目标元素(标签)。 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的。 常用的复合选择器包括:后代选择器、子选择器、并集选择器、伪类选择器等等。
64 1
|
XML 前端开发 数据格式
|
前端开发 Ruby 容器
CSS3总结
CSS3总结!
CSS3总结
|
前端开发 JavaScript
有趣且实用的 CSS 小技巧(上)
今天来看一些有趣且实用的 CSS 小技巧!
127 0
|
前端开发
CSS/CSS3
CSS/CSS3
121 0
|
Web App开发 移动开发 前端开发
CSS 常用技巧
相信大家在写css属性的时候,会遇到一些问题,比如说:垂直对齐,垂直居中,背景渐变动画,表格宽度自适应,模糊文本,样式重置,清除浮动,通用媒体查询,自定义选择文本,强制出现滚动条,固定头部和页脚,自己在网上看到的一篇关于css的文章,感觉这里边一些常用的css代码片段对大家很有帮助,所以我就把这篇文章分享给大家,希望大家能够喜欢。
2859 0
|
前端开发
为什么不会有CSS4?
简单地说,就是从CSS3开始,CSS规范就被拆成众多模块(module)单独进行升级,或者将新需求作为一个新模块来立项并进行标准化。因此今后不会再有CSS4、CSS5这种所谓大版本号的变更,有的只是CSS某个模块级别的跃迁。
2031 0