css样式

笔记4-7-11

1.Css基础知识

1.1基本概念

css指层叠样式表（Cascading Style Sheets ）

为什么需要css

HTML描述了需要呈现的内容，二而css则定义了这些内容的呈现形式，比如字体，颜色等。使用css能够将页面内容和呈现形式有效分离，有利于分工合作，也有利于快速更换不同的呈现形式。

使用样式表可以有三种方式：

（1）.内联样式

<p style="color: green;font-size: 90px">外部演示文件</p>

<p style="color: green;font-size: 90px">外部演示文件</p>

将样式表定义在style属性中

内容与表现形式高度耦合，维护困难，不利于分工合作

 

（2）.内部样式

<style>    k{        color: green;        font-size: 90px;     }</style><k>外部演示文件2</k>

一般写在对应的html文件中，降低了耦合性，但是维护也比较困难

（3）.外部样式

<p style="color: green;font-size: 90px">外部演示文件</p>

css中也可以使用注释，形式为/*、。。。。*/

然后在需要使用的这些样式的html文件引入改样式表文件

<link rel="stylesheet" type="text/css" href="css/EX-01.css"/>

外部样式表使得内容和表现形式彻底分离，有利于分工合作集维护。可以在多个html中使用。

*内联样式的权利>内部样式的权利>外部样式的权利，这与正常的逻辑一样

1.2 颜色

所有的颜色都有可以有红色，蓝色，绿色三色调配而成，所以称为三原色

Css中有多种颜色表示形式：

（1）十六进制形式：

css中用8表示颜色，那么可以表示2⁸种颜色，即256中颜色，所以总共可以表示256*256*256中颜色

<p style="color: purple">十六进制</p>

（1）RBG形式

<p style="color: RGB(255,0,0)">RGB进制</p>

（2）RGBA形式

在RGB颜色的基础之上增加了透明度分量（alpha），该分量的取值在0到1之间，0代表没有颜色

<p style="color: RGBA(255,0,0,1)">RGBA进制</p>

（3）HSL颜色

颜色可以由另外的分量来表示，即色调，饱和度和明度。

<p style="color: HSL(100,60%,80%)">HSL进制</p>

（4）HSLA颜色

颜色可以由另外的分量来表示，即色调，饱和度和明度，也可以使用a太调整透明度，与RGBA一样。

<p style="color: HSLA(100,60%,80%,0.2)">HSLA进制</p>

（5）预定义颜色

Css提供了一些预定义的颜色，你可以直接调用颜色名字来。

<p style="color: pink">预定义颜色表现形式</p>

 

1.3尺寸单位

cm：厘米

cm：毫米

in：英寸，inch

px：像素，pixel

%：百分比

em vw vh（自学）

绝对单位：px，in，cm，mm

相对单位：%，em，vh，vw

 

1.Em，使用格式：

首先需要在css中定义以下代码

html {    font-size: 100%;}body {    font-size: 1em;}#wrap {    font-size: 0.875em;/*1 ÷ 16 × 14= 0.875em值*/    width: 14.2857em;/*1 ÷ 14 × 200 = 14.2857em值*/    height: 7.1429em;/*1 ÷ 14 × 100 = 7.1429em值*/    border: 0.357em solid red;/*1 ÷ 14 × 5 = 0.357em值*/    margin: 1.071em;/*1 ÷ 14 × 15 = 1.071em值*/    padding: 0.714em;/*1 ÷ 14 × 10 = 0.714em值*/    line-height: 1.2857em;/*1 ÷ 14 × 18 = 1.2857em值*/}

然后在js中先书写链接，是其连接到css中，使用是在标签的里面添加id，使id=”**”，该星号代表了css中#后面的名字

<div id="wrap">    <p>郑志福</p>    <p>熊凯文</p></div>

 

2.Vw

指的是viewpoint width，视窗宽度，1vw等于视窗宽度的1%，与vh很相似

<style>    p{        font-size: 3vw;    }</style>

反正感觉没啥，就是变大了；视初始的为1,3vw就是把视窗宽度原来的放大到3倍

3.Vh

指的是viewpoint height，视窗高度，1vh等于视窗高度的1%，与vw很相似

<style>    p{        font-size: 3vh;    }</style>

这个就不太清楚了，有变大，但是没有那么大，应该是把视窗高度原来的放大到3倍

我放大到10倍左右，粗略的计算了下，再根据字义，应该是这样了

2.基础属性

属性名：属性值

Background：red；p{    font-size: 10vh;}

2.1字体相关属性

Font-family：字体名称

Font-size：字体大小

Font-style：字体的样式

Font-variable：字体变量

Font-weight：字体粗细

<

style>    div{        font-family: 楷体;        font-size: 32px;        font-style: italic;        font-variant: all-small-caps;        font-weight: 100;    }</style>

 

可以简写：

Font-style Font-variable Font-weight Font-size Font-family

<Style>Div{font: all-small-caps 100 48px 楷体; }</style>

前三个可以不写，后面必须写，减少了代码，简洁

2.2文本相关属性

文本相关属性主要包括颜色、对齐方式、修饰效果

1.Color：设置文本颜色

2.Text-decoration：

1) None 无

2) Underline 下划线

3) Overline 上划线

4) Line-through 删除线

3.Text-shadow：增加阴影，可以往任何方向投射，正正,阴影在右下

Text-shadow:5px 5px #0000ff;

4.Direction:方向，分别是从左往右（ltr）、从右往左（rtl）

5.Text-align：对齐方式

Left：左对齐；right：右对齐；center：居中对齐；justify：两端对齐

6.Vertical-align：文本垂直对齐方式

Top：靠上；middle：中间：button：靠下

7.Text-indent：文本缩进

8.Letter-spacing：字母间距，就是单词里面的字之间的间距

9.Word-spacing：字间距，字与字的间距，单词也属于字

10.Line-height：设置行高，实际上是调整行间距