CSS

文本标签

和

1. em标签用于表示一段内容中的着重点。（语气强调）
2. strong标签用于表示一个内容的重要性。（内容强调）
3. 通常em显示为斜体，而strong显示为粗体。

和

1. i标签会使文字变成斜体。 京东用 ico 展现小图片，小图标，这和em显示斜体的区别
2. b标签会使文字变成粗体。
   二者存表现的，不同于和，没语意。只是加粗和斜体

small

1. 表示细则，变成小字，比如版权。
2. big
   变成大字。现在不用。都是表现的，都用css样式变。

cite

《七龙珠》 变斜

q

1. 孔子曾经说过：学而时习之不亦说乎

   
   ----->出现" " css加的. before . 后期就不需要把带的去掉,因为ie7就不支持"".样式不统一.
2. blockquote
   

   天将降大任于是人也...

   
   独占一行了 所以不能用

   包含了。

3. 知乎，用的比较多，比如知乎上引用别人的话（回复）就需要这个。

sup和sub

1. sup（包起来想要表线的元素） ：上标 常用：百度百科 后面的小链接。
2. sub : ：下标

和

1. ins表示插入的内容，显示时通常会加上下 划线。
2. del表示删除的内容，显示时通常会加上删 除线。 常用：京东淘宝价格 知道语意就可以，CSS做样式。

和

1. pre 预格式 保存代码格式。结果：默认等宽字体了，每个字符宽度一样了，保存原来格式了。
2. code 表示代码的（语意）
3. 一般他俩一起用。 -->爬到code标签就知道抓到了代码。
4. 学文本就是学语意，样式CSS写。

demo

    
    



    

        测试！

        测试

        测试！

        测试！

        测试！

        测试！

        《测试》 

        测试测试测试

        
测试1

        lao[1]

        lao[1]

        老王真有钱

        有100000w

        不，有100000000w

        
    

    

while True:
    

执行结果：

效果图1.png

列表（三者可以互相嵌套）

1. 有序列表（序号）

输出结果：显示1、2、3、 （可以更改样式 type=‘1’ type=‘a’ type=‘i’）

demo

列表项1
列表项2
列表项3

2. 无序列表 （用的最多）

输出结果：前面带项目符号 （点，不用原点可以换 详见手册）一般不用默认，因为不同浏览器，显示不同。如果必须有用背景图片。

常用：新闻列表，下方123导航。

！！！去除项目符号：

        list-type:none；

demo

列表项1
列表项2
列表项3

！li是块元素，ul就是块元素所以能嵌套。

3. 定义列表

（给一个东西下定义）
使用dl、dd（对定义的描述）、dt（被定义内容）来创建一个定义列表。
demo

  
定义项1
  
定义描述1
  
定义项2
  
定义描述2
  
定义项3
  
定义描述3

demo

    
    
    
        
    


    

        

            测试
        
    
    

        

            test

            test1

        
        

            test

        
        

            test

        
    
    

        
武松
        
虎打
    

执行结果：

效果图2.png

为内容设置不同的样式

文本格式化

1. w200=with200 快捷
2. px

3. 百分比（子元素随着父元素一起变，自适应界面）
   也可以使用一个百分数来表示一个大小，百分比是相 对于父元素来说的，如果父元素使用的大小是16px， 则100%就是16px，200%就是32px。

4. em（手机端移动端用，根据字号调整）
   em和百分比类似，是相对于font-size说的
   1em = 1font-size

demo

执行效果图：

效果图3.png

颜色

RGB

1. 也可以使用计算机中常用的RGB值来表示 颜色。可以使用0~255的数值，也可以使 用0%~100%的百分比数。
   – RGB(100%,0%,0%)
   – RGB(0,255,0)
   第一个数表示红色的浓度，第二个数表示 绿色浓度，第三个数表示蓝色的浓度。

十六进制颜色

6600FF实际上包含了三组十六进制的 数字。
上边的例子中66代表红色的浓度，00代表绿 色的浓度，FF代表了蓝色的浓度。
如果每一组数中的两个数字都相同（6600FF缩短为#60F。）

demo

字体样式

1. 通过font-family可以指定标签中文字使用 的字体。
   例如：
   p{font-family:Arial} Arial只是英文，汉语不变。为了解这个问题。
   可以同时指定多个字体。
   例如：
   ！p{font-family:Arial , Helvetica , 微软雅黑} 只能先支持第一个，后面不支持。！ 中间有空格的字体，一定要引上
   避免使用花花的字体，必须适用，可用截图。

字体分类

（大的分类。是一类字体）
放在浏览器里面，会根据浏览器显示不同的字体。
serif（衬线字体） （横平竖直）
sans-serif（非衬线字体） （不一样的字体 一后面代沟）
monospace （等宽字体） 编程时用等宽
cursive （草书字体）
fantasy （虚幻字体）

字体其他样式

font-style
用来指定文本的斜体。
指定斜体：font-style:italic 斜体 i标签
font-style:oblict倾斜

---

font-weight
用来指定文本的粗体。
指定粗体：font-weight:bold
font-weight:100指定数值 （400细，600正常，900加粗）

---

小型大写字母
– font-variant:small-caps
在该样式中，字母看起来像是稍 微缩小了尺寸的大写字母。
ABCD 小的ABCD

---

字体属性的简写（设置多个样式用它）
font可以一次性同时设置多个字体的样式。
语法：
– font:加粗 斜体 小型大写 大小/行高 字体
.P3{
font: italic ‘微软雅黑’；
}

！字号字体必须写。字体最后一个样式，字号放在字体前面，他俩不能乱，乱了没效果

demo

    
    
    


    
一段汉字，ABCDEFGabcdefg
    
一段汉字，ABCDEFGabcdefg

执行结果：

效果图4.png

行间距

原理：

   设置行高，间接设置间距。

例子：

默认设置字号16
间距=行高-16（默认）
公式：
行间距 = line-height – font-size
%100 = 1 相对于 size20（也就是说%50==10px
%100==20px）

---

font ： 30px/50px 行高
不写50PX就是默认值。

---

.p2{
            line-height: 50px;
            font: 30px "微软雅黑";
        }
必须放在后面不然被覆盖。

大写化

text-transform样式用于将元素中的字母全都变成大写。
大写：text-transform:uppercase
小写：text-tansform:lowercase
首字母大写：text-transform:capitalize
正常：text-transform:none

demo

        .p1{
            text-transform: lowercase;
        }

文本的修饰

text-decoration属性，用来给文本添加各 种修饰。通过它可以为文本的上方、下方 或者中间添加线条。
可选值：
underline 下划线
overline 上划线
line-through 中划线

！！！none 默认正常显示 去除超链接的下滑线

字母间距和单词间距

letter-spacing用来设置字符之间的间距。（字母中文都可以）
.P3{
letter-spacing：10xp；
}
word-spacing用来设置单词之间的间距。（中文无意义）
这两个属性都可以直接指定一个长度或百 分数作为值。正数代表的是增加距离，而 负数代表减少距离。

对齐文本

text-align用于设置文本的对齐方式。
可选值：
left：左对齐
.P3{
text-align：left；
}
right：右对齐
justify：两边对齐
center：居中对齐

首行缩进

text-indent用来设置首行缩进。
该样式需要指定一个长度，并且只对第一 行生效。
32px相当于二个字。但是不随着字号变化而变化。

.P3{
         flont.size=20px
        text-indent：2em；
}

可以通过搜索引擎搜索到，但是不让用户看。 text-indent：-2222em；

在网页中“一切皆是盒子”

！！！盒子模型

每个元素都是盒子。（都是矩形）

一个盒子我们会分成几个部分：
举例：箱子放电视。
单词记下。
内容区(content) （放电视的地方）
内边距(padding) （电视和箱子的距离） 都适用单独设置
边框(border) （箱子四个边） 都适用单独设置
外边距(margin) （盒子和盒子之间的距离） 都适用单独设置
盒子套盒子（可以兼容），放在内容区。
模型图片：

image.png

w h 设置内容区
border-width:1px 2px 3px 4px;上又下左 -->都适用单独设置

demo

盒子大小由以下共同决定：

内容区(content) （放电视的地方）
内边距(padding) （电视和箱子的距离）
边框(border) （箱子四个边）

边框的样式

边框可以设置多种样式：

none（没有边框）
dotted（点线）
dashed（虚线）
solid（实线）
double（双线）

边框

border-top border-right border-bottom border-left

demo

        .box{       
            可以单独设置四个边的样式，
           规则和border一样，
           只不过它只对一个边生效
            */
            /*border: red solid 10px;*/
            /*border-left: red solid 10px;*/
            /* border-top: red solid 10px;
            border-bottom: red solid 10px;
            border-left: red solid 10px; */
            border: red solid 10px;
            border-right: none;
        }