CSS第一天学习
来源:互联网 发布:表格数据不多 格式大 编辑:程序博客网 时间:2024/06/05 10:45
1.1基本概念
CSS层叠样式表(Cascading Style Sheets)
为了实现页面内容和表现形式的分离更加省时省力
为什么需要CSS
HTML描述了要呈现的内容,而CSS则定义了这些内容的呈现形式。比如字体,颜色等。使用CSS能够将页面内容和呈现形式有效分离,有利于分工合作,也有利于快速更换不同的呈现形式。主要就是让它看起来更美观好看。
使用样式有三种方式
1.内联样式优先于内部样式不会被其影响
<p style="font-size: 24px;color: chartreuse">内联样式的演示</p>
只对当前标签有效
将样式定义在style属性中,内容修改麻烦,不利于维护和分工合作,只能运用在当前标签
2.内部标签
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> p{ font-size: 20px; color:red; } </style></head><body><p style="font-size: 20px;color: chartreuse">内联样式的演示</p><p>内部样式</p><p>内部样式</p>
比内联标签优化了许多但是并没有实现分离也只能在其页面使用
3.外部样式表
p{ font-size: 20px; color: red;}<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" type="text/css" href="CSS/E102-01-02.css"></head>
彻底分离 利于维护和分工合作
任何需要用到该样式表中的样式的页面都可以用该文件链接实现
推荐使用外部样式
但以后的案例为了方便,尽量使用内联与内部标签
1.2颜色
自然界的颜色数量是无穷的,但是计算机只能表示有限的信息。
需要将连续的量(无穷)转化为离散的量(有限)的
所有的颜色都可以由红red绿green蓝blue三原色调配而成
css中用8位表示一个颜色,那么可以表示比28(256)种颜色,所有总共可以表示256*256*256种颜色(真彩色)
Css中有多种颜色表示形式:
(1)十六进制形式:
<P style="color: #ff0000;">十六进制颜色表示样式</P>
(2)RGB颜色
<P style="color: RGB(255,0,0);">RGB颜色表示样式</P>
(3)RGBA颜色
在RGB颜色基础上增加了透明度分量(Alpha),该分量的驱逐范围为0(完全透明)1.0(完全不透明)
<P style="color: RGBA(255,0,0,1);">RGBA颜色表示样式</P>
(4)HSL颜色
颜色也可以由另外三个分量来表示,即色调、饱和度和明度。
<P style="color: HSL(120,50%,50%);">HSL颜色表示样式</P>
(5)HSLA颜色
在HSL颜色的基础上增加了Alpha分量
<P style="color: HSLA(120,50%,50%,0.5);">HSL颜色表示样式</P>
(6)预定义颜色
<P style="color:red">预定义颜色表示样式</P>
尺寸单位
常见的单位:
Cm:厘米
Mm:毫米
in:英寸(inch)
Px:像素(pixel)
%:百分比
Em、它是描述相对于应用在当前元素的字体尺寸,所以它也是相对长度单位。一般浏览器字体大小默认为16px,则2em == 32px;
vw、viewpoint width,视窗宽度,1vw=视窗宽度的1%
Vh、viewpoint height,视窗高度,1vh=视窗高度的1%
Px:绝对单位,%相对尺寸单位。
相对长度:
还有个%,图片上没加上去
绝对长度:
- CSS第一天学习
- Html+Css学习第一天
- CSS第一天学习笔记
- CSS学习之路第一天
- CSS第一天
- CSS第一天
- div+css 第一天
- css第一天
- Css第一天
- 学习笔记第一天,关于div+css的理解
- 2017/2/22 学习css的第一天
- 第一天:html、css的初步学习和制作七巧板
- 第一天 XHTML CSS基础知识
- 第一天 XHTML CSS基础知识
- 第一天 XHTML CSS基础知识
- 慢慢说CSS第一天
- css实战(第一天)
- JAVAWEB第一天css篇
- log中的Total PSS by OOM adjustment
- java之约会
- Linux基础
- java学习之路(4)-常量 、变量与数据类型
- CSS基础属性2
- CSS第一天学习
- html绘制课程表
- oracle创建用户导入本地SQL脚本
- python子类调用父类的方法
- 基本套接字编程(1) -- tcp篇
- [leetcode]95. Unique Binary Search Trees II(Java)
- html文件下载时的header设置
- BAT路线图1.0
- Spark Streaming介绍,DStream,DStream相关操作(来自学习资料)