2020-12-08

最新推荐文章于 2024-11-14 00:00:11 发布

明天T

最新推荐文章于 2024-11-14 00:00:11 发布

阅读量144

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_51654260/article/details/110877047

版权

一、继承

继承的介绍

1、在给父类或者祖先元素设置一些属性后，其子代元素也会继承该样式，这就叫做继承性。
2、继承性是从当前元素开始，一直到最小的元素。
3、有继承性的元素：
这些属性包括：color，text-开头，line-开头的，font-开头的。但是white-space空白符的处理，text-decoration规定添加到文本的装饰，text-shadow文本阴影效果是无继承性的，。
4、无继承性的元素
display：规定元素应该生成的框的类型
关于盒子、定位、布局的属性，不能被继承。

二、层叠

1、样式表：行内式>内嵌式与外链式（内嵌式与外链式的比较是就近原则）。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>

<style>内嵌式</style>

<link rel="stylesheet" href="css/demo.css">/* 外链式 */

</head>
<body>

<span style="color: red;font-size: 90px">行内样式</span>
</body>
</html>

2、选择器：ID选择器>类选择器>标签选择器。
3、复杂选择器的计算：ID权重100，类选择器权重为10，标签权重为1。
【注】权重相同，比较书写顺序，后写的覆盖先写的。
、并集选择器分开计算权重。
2、如果不能直接选中元素，通过继承性影响的话，权重为零。
3、同一个标签有多个类名，样式有冲突的话，跟类名的顺序无关，和样式的先后顺序有关。

三、！important

1、important 翻译：重要的。
2、格式：
k:v !important;
例子：

#box {
     color:red !important;
     color:blue;
 }

上边的例子如果没有！important由于就近原则，后边的覆盖前边的，颜色会是blue，但是red有了！important，red的优先级提高会显示红色。
【注】
！important 提升的是一个属性，而不是选择器的权重。
！important无法提升继承的属性，权重仍然是0。
作用：
将该属性的权重提为最高。但是要慎用，容易造成该关键字成倍增加。

四、行高

1、line-hight：行高
一行文字实际占有的高度。
表示方式：px，百分比，em。
百分比：参照字体大小。、
em。字体的倍数。
2、设置行高，字号时，一般设置为偶数。这样可以保证，他们的差一定是偶数，方便计算与居中。
3、特殊用法：
要让一行文字在盒子中垂直居中，可以让行高等于盒子高。【只适用于单行文字】
即： line-height=height

     div {
            height: 50px;
            background-color: brown;
            font-size: 24px;
            line-height: 50px;
        }
    </style>
</head>

<body>
   
    <div>
      八百里分麾下炙
    </div>

五、字体大小与字体

1、font-size
字号字体大小
设置方式：单词，px，em，百分比。
字体大小默认为16px。
2、【推荐使用 px 】
3、em 相对于父元素的font-size属性计算的。
1em=父元素的font-size的值。
4、百分比相对于父元素的font-size属性计算的。
快捷键：
fz30 = font-size: 30px;

字体

1.字体分为英文字体和中文字体。有些英文字体不会作用到中文字体上，而中文字体会作用到英文上。
2.字体属性值可以为多个，后面的字体为备选字体，当前面的字体，电脑上没有加载时，会去加载后面的字体，如果都没有，会使用默认字体（微软雅黑）
3.书写顺序：英文字体写在前面，中文字体写在后面。
4.中文字体也有英文名称
宋体：Simsun；
黑体：SimHei；
微软雅黑：Microsoft YaHei；

七、字体加粗

1、font-weight
属性值：数字，单词。
单词：normal（正常） bold（加粗） bolder（更粗）lighter（细）
fwb = font-weight: bold;

<style>
font-weight: bold;
</style>

八、字体样式

1、font-style 字体样式
normal 正常默认值
italic 斜体【使用斜体的话，推荐使用】
oblique 【不推荐使用】
【注意】
1.italic 带有倾斜属性的字体才可以设置。
2.oblique 没有倾斜属性的字体也可以设置。

p {
          /*    正常     */
          font-style: normal;
           /*    斜体     */
         font-style: italic;

九、文本溢出

1、/* 禁止文本换行 /
white-space: nowrap;
2、 / 溢出内容隐藏 /
overflow: hidden;
3、 / 使用省略号来代替被修剪的文本 */
text-overflow: ellipsis;

   <style>
       div{
           width: 200px;
           height: 100px;
           background-color: lightblue;
           /* 禁止文本换行 */
           white-space: nowrap;
           /* 溢出内容隐藏 */
           overflow: hidden;
           /* 使用省略号来代替被修剪的文本 */
           text-overflow: ellipsis;
       }
   </style>

十、段落对齐方式

1、text-align: 设置段落的对齐方式，与文本的行数没有关系。
left 左对齐默认值
center 居中对齐
right 右对齐。

<style>
     p{
         font:24px/40px "宋体";
         background-color: aquamarine; 
         text-align: left;左对齐
         text-align:right;右对齐
         text-align: center;居中对齐
     }
 </style>

十一、文本缩进与文本修饰

1、text-indent 文本缩进
单位：px em 百分比。
百分比是按照盒子的宽度。
可以是负数，负数向前（左）缩进，正数为向后（右）缩进。

<style>
 p{
            font-size: 24px;
            background-color: aquamarine;
            text-indent: 2em; 
            /  *  缩进两个字符  *     /
        }
</style>

text-decoration 文本修饰
有四个常见的样式
none 正常
下划线 underline
上划线 overline
中划线：line-through

十二、单词间距与字母间距

1、word-spacing单词间距，单位是px, 对于中文无效。
2、letter-spacing字母间距，单位px。

<style>
        p{
            font-size: 24px;
            background-color: aquamarine;
            /* 单词间距，单位是px 对于中文无效。 */
            word-spacing: 24px;
        }
        p{
            font-size: 24px;
            background-color: aquamarine;
            /* 字母间距，单位是px  */
            letter-spacing: 24px;
        }
    </style>
</head>

十三、大小写转换

1、大小写转换

text-transform: uppercase ; 大写
text-transform: lowercase; 小写

<style>
p{
            font-size: 24px;
            background-color: aquamarine;
           /*     大写转变       */
            text-transform:  uppercase ;
             /*     小写转变       */
            text-transform: lowercase;
        }
</style>