CSS基础知识

来源：互联网发布：台湾处境现状知乎编辑：程序博客网时间：2024/06/15 20:55

1.1 CSS的基本概念

CSS指层叠样式表（Cascading Style Sheets）
为什么需要用CSS
HTML描述了要呈现的内容，而css则定义了这些内容的呈现形式，比如字体、颜色等。使用CSS能够将页面内容和呈现形式有效分离，有利于分工合作，也有利于快速更换不同的呈现形式。
使用样式表可以有三种方式

(1)内联样式

<pstyle="font-size:20px;color:brown">内联样式</p>

将样式定义在style属性中，内容和呈现形式高度耦合，维护困难，不利于分工合作，只能用于当前文件

(2)内部样式

<head>        <style>             p{                    font-size: 36px;                              color: blueviolet;                              }                </style>         </head>        <body>        <p>内部样式演示</p>        </body><head>

在标签中通过 style 标签来定义内容和表现形式的耦合程度降低了，但还是在HTML文件中，没有实现完全分离。定义的样式只能在当前的页面中使用(3)外部样式表——–

p  {       font-size: 50px;       color: crimson;    }

CSS中也可以使用注释，形式为/*……*/然后在需要使用这些样式的HTML文件中引入该样式表

<head>    <title></title>    <link rel="stylesheet" type="text/css" href="E102-01-02.css"/></head>

外部样式表使得内容和表现形式彻底分离，有利于份合作及维护，可在多个HTML中引用

1.2 颜色

所有的颜色都可以由红色、绿色、蓝色三种颜色调配而成，这三种颜色俗称三原色
CSS中用8为表示一个颜色，那么可以表示28种颜色，即256中颜色。所以总共可以表示256x256x256中颜色（真彩色）
Css中有多种颜色表示形式：
1. 十六进制形式：#ff0000
2. RGB颜色：（255,0,0）
3. RGBA透明
在RGB颜色基础上增加了透明度的分量Alpha，该分量的取值范围为0(完全透明)到1（安全不透明）
4. HSL颜色
颜色也可以由另外三个分量表示色调、饱和度、明度
5. HSLE颜色
在HSL颜色的基础上增加了Alpha
6. 预定义颜色
CSS提供了一些常用的预定义颜色，比如：rad、green

1.3 尺寸单位

In:英寸（inch）
Px:像素（pixel）
Em:1em=12px,em是相对长度单位。相对于当前对象文本的字体尺寸，如，当前对行内文本的字体尺寸未被设置，则相对于浏览器屏幕的默认字体尺寸
Vw：相对于视口的宽度。视口被均分为100单位的w
H1{
Font-size:8vw
}
如果视口的宽度为200mm，那么上述代码中h1的字号将为16mm，即（8*200）/100
Vh：相对视口的高度。视口被均分为100单位的vh
H1{
Font-size:8vw
}
如果视口的高度是200mm,那么上述代码中h1的元素字号为16mm。

1.4 进制

进制也就是计数的方法
基：某种计数方法所需要的符号的个数
权：某位的“1”所代表的值
10进制：101=1*102（权）+0*101+1*100
8进制： 145=1*82+4*81+5*80
16进制：65=6*161+5*160
101的八进制是145，它的16进制是65
属性名：属性值

Background-color:red;P{Background-color:red;Font-size:30px}

2.1 字体相关属性

Font-family：字体名称（楷体、黑体等）
Font-size：字体大小
font-variant：字体变化（如大小写转换）
font-style：字形（斜体等）
font-weight：字体粗细
可以简写，书写顺序：
font-style font-variant font-weight Font-sizeFont-family
前面三个标签可缺省，使用默认值，font-size font-family必须指定值
这种书写方式更加简洁
P{
Font:50px 楷体；
}

2.2 文本相关属性

文本相关属性主要包括颜色、对齐方式、修饰等
1. Color：设置文本的颜色
2．Text-decoration：文字修，其属性有：
（1）None，默认值，没有装饰效果
（2）Underline：加下划线
（3）Overline：加上划线
（4）Line-through：加删除线
3. Text-shadow：设置字体阴影，比如：text-shadow: 1px 2px black;
1px是向右平移1像素的单位，2px是向下平移2px的单位。阴影颜色为黑色。
4.direction：对齐方式
Itr ：自左向右；rti:自右向左
5. text-align：文本水平对齐方式
（1）left：左对齐
（2）right：右对齐
（3）center：居中
（4）justify：两端对齐
6. Vertical-align:文本垂直方向对齐
（1）Top:靠上对齐
（2）Buttom:靠下对齐
（3）Middle：垂直居中对齐
7. text-indent：文本缩进
8．Letter-spacing：字符（字母）之间的距离
9. Word-spacing：单词之间的距离
10.background-color：设置一行文本的背景颜色
11.line-height:设置行高

2.3背景相关属性

Background-color：背景颜色
Background-image:设置背景图片，需要设置图片的URL地址
Background-repeat：图片的复制选项
（1） repeat：在水平和垂直两个方向进行复制
（2） none-repeat：不复制
（3） repeat-x:在水平方向复制
（4） repeat-y:在垂直方向复制
background-position:图片位置
也可以将这一组属性值封装到一个属性background中，书写顺序是：
背景颜色：Background-color
背景图片：Background-image
重复方式：Background-repeat
位置：background-position
表达更加简洁
background: antiquewhite url(“../华点.png”) no-repeat right bottom;

2.4 尺寸相关的属性

Height：高度
Width：宽度

div{    width: 200px;    height: 300px;    background-color: coral;}

max-width：最大宽度
max-height：最大高度
min-width:最小宽度
min-height：最小高度

2.5 显示相关属性

1. 隐藏元素的方法:
(1)visibility:hidden，仅仅隐藏内容，该元素所占的位置依然存在
(2)display：none,不仅仅隐藏内容，且不占位置
display可以设置元素的显示模式
（1）inline:将块级元素以内联元素形式显示，此时width和height属性无效，其空间取决于元素的内容
（2）inline-block:将块级元素以内联元素形式显示，同时兼具块级元素的某些特征，比如可以使用width和height设置所占位置的大小。
也可以将内联元素以块级形式来显示，即display：block
Block（块级元素） inline（内联元素）

2.6 盒子模型

1. Margin：外边距
Margin-top、margin-right、margin-bottom 、margin-left
使用方式
（1） margin：30px；表示上下左右外边距都为30px;
（2） margin-left（right、buttom、top）:30px;单独设置上下左右外边距
（3） margin：10px 20px 30px 40px;分别表示上右下左四个边距分别为10px、20px、30px、40px
2. padding:内边距
也有上下左右边距，和margin类似。不再赘述
3. border：边框
Border-width：边框的宽度
Border-style：边框线条类型
Border-color：边框线条的颜色
也可以使用更优化的书写方式
border:3px dashed blue;
4 outline:轮廓线
用法参考border

2.7定位

地位方式有：static（静态）、fixed（固定）、relative（相对定位）、absolute（绝对定位）
1. Static：静态定位（默认）
无定位。元素正常了流中，不受left、right、top、bottom等位置属性的控制
2. Fixed：

<head>    <style type="text/css">        #div1{            width: 200px;            height: 250px;            background-color: beige;            position: fixed;            top: 50px;            left: 30px;        }        #div2{            width: 200px;            height: 250px;            background-color: darksalmon;        }    </style></head><body><div id="div1"></div><div id="div2"></div></body>

从结果可以看出，fix定位会将元素从流中“摘”出来单独进行定位，定位的位置取决于left、top。
3. 重新定位之后可能会出现重叠，通过z-index(只有设置了position属性才可以用z-index)可以调整其顺序。

<head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        #div1{            width: 200px;            height: 250px;            background-color: blueviolet;        }        #div2{            width: 200px;            height: 250px;            background-color: darksalmon;            position:relative;            top: 50px;            left: 30px;        }        #div3{            width: 200px;            height: 250px;            background-color: firebrick;        }    </style></head><body><div id="div1"></div><div id="div2"></div><div id="div3"></div></body>

从结果可以看出，相对定位是从原来位置进行位移，但并不影响后续元素的位置
相对定位就是如果设置了其top、left值，它会相对于它原来所在的位置进行位移。

Absolute绝对定位

绝对定位的元素将被从流中“摘出来”，依靠left与top属性进行定位
与fixed类似，但是参照物不同
Fixed与absolute的区别：
Fixed参照根元素（HTML）
Absolute参照父容器
在没有滚动条的情况下俩者没有差异，在有滚动条的情况下，fixed定位不会随着滚动条移动，而absolute则会随着滚动条而移动。

2.8 浮动

浮动（float）
通过设定float，可以使元素从原本的文档流中脱离出来，感觉像浮在原本的文档流上面。

<head>    <style type="text/css">        #div0{            width: 1000px;            border: 1px solid red;        }        #div1{            width: 100%;            height: 100px;            background-color: blueviolet;        }        #div2{            width: 200px;            height: 300px;            background-color: darksalmon;            float: left;        }        #div3{            width: 250px;            height: 300px;            background-color: firebrick;            float: left;        }        #div4{            width: 550px;            height: 300px;            background-color: springgreen;            float: left;        }        #div5{            width: 100%;            height: 100px;            background-color: khaki;            clear: both;        }    </style></head><body><div id="div0">    <div id="div1"></div>    <div id="div2"></div>    <div id="div3"></div>    <div id="div4"></div>    <div id="div5"></div></div></body>上面的案例用CSS+div实现了另一种布局方式clear：用于清除浮动

阅读全文

0 0