学习层叠样式表css＜二＞

最新推荐文章于 2024-11-01 12:26:05 发布

雷亚文

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量95

点赞数 2

文章标签： css html5 javascript

本文链接：https://blog.csdn.net/m0_46331585/article/details/119222575

版权

任务一属性

文字类属性

css提供了常用的修饰文本的属性如下表

样式属性	说明
font-size	设置字体大小如：2px
fongt-family	设置字体类型如;宋体
font-style	设置字体样式如：斜体
font-weight	设置字体粗细如：bold(加粗)
line-height	设置一行文字的高度，设置高度后，可以使本行内容垂直居中
text-align	设置文字水平对象方式。他的值可以是：left,center,right
text-decoration	文本的修饰，他的值可以是underline、none、line-through
font	复合属性，设置字体的综合信息

以上属性练习

font-size: 6px;                
font-family: "微软雅黑,宋体";    
font-style: italic;         
font-weight: bold;           
line-height: 1.5em;            
text-align: center;            
text-decoration
注释:文字高度建议用单位em,即相对高度。如果字体是20px,那么我的行高设为line-height: 1.5em;就是字体高度的1.5倍。如果单位不是em,而是rem的话：根据根的值呈现相应的比例。

文本类属性

控制文本颜色

1.能够使用表示颜色的单词控制文本颜色
能够使用表示颜色的代码(十六进制数字)来控制文本颜色

能够使用rgb函数控制文本颜色

.p1{
    color: red;
    color: #FF0000;
    color: rgb(11,200,87);
   }

控制文本排列方式

能够处理 img 底部空白

理解 img 与文字并排时默认的对齐方式

.img{
    vertical-align: bottom;
}

<body>
        <p>莫道桑榆晚，为霞尚满天</p>莫道桑榆晚，为霞尚满天.莫道桑榆晚，为霞尚满天
        <img class="img" src="img/1.png" />为霞尚满天
</body

能够控制文本垂直排列方式

vertical-align:
基于基线对准
vertical-align:bottom;

能够控制文本水平排列方式

 text-align: center;
 text-align: left;
 text-align: right;

控制文本首行缩进
```
  text-indent: 2em;
```
文本装饰
- 能够为文本添加上划线
- 能够为文本添加中划线
- 能够为文本添加下划线
```
text-decoration: overline;
text-decoration: underline;
text-decoration: line-through;
```
- 能够为文本同时添加上划线、中划线、下划线
```
text-decoration: overline underline line-through;
```

元素尺寸

控制元素宽度
- 控制块元素的宽度
- 设置元素的最大宽度、最小宽度

控制元素高度

控制块元素的高度

能够设置元素的最大高度、最小高度

.mydiv1{
    /*width: 300px;*/
    /*height: 300px;*/
    background-color: red;
    /*text-align: center;*/
    text-align: right;
    max-width: 1000px;
    min-width: 600px;
    max-height: 1000px;
    min-height: 600px;
    margin: 0 auto;  居中
    }

内联元素的宽度和高度

除非让内联元素成为BFC否则其宽度高度大都无效

可以通过让内联元素成为BFC的方式来设置其宽度和高度

display：nome   (不显示)
注释：用这个后，原来的位置也会消失，要想原来的位置依旧存在就要用visibility
display：block  (块标签)
dispiay:inline (行标签)内联元素
行级元素没有高和宽，他是由内容撑大的。如果用display:inline 就会设置成行元素
如果应用display:inline-block  就会成为行级块，就有自己的高和宽了。

任务二伪元素

为了区别伪类，用双冒号，即：：
虚拟出来的，不是真正的元素。
伪元素的本质是创建了一个有内容的容器。
可以同时使用多个伪类，而只能使用一个伪元素。

用法：

选择指定元素的第一个单词

p::first-letter{
                color: red;
            }

选择指定元素的首行

p::first-letter{
                color: red;
            }

在指定元素的内容之前插入内容

p::before{
            content: url(img/1.png);
            }

在指定元素的内容之后插入内容

p::after{
            content: url(img/1.png);
        }

任务三修饰背景

css修饰背景包括背景色和背景图像两种

样式属性	说明
background	复合属性，设置背景特性的综合属性
background-image	背景图片
background-repeat	设置背景照片是否重复
background-color	设置背景色
background-position	设置背景图像的起始位置
background-size	设置背景图像的高度和宽度 1.contain:把图像扩展至最大尺寸，以使宽度和高度完全适应内容区域 2.cover:把背景图像扩展到足够大，让背景图完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
background-attachment	背景图像是否随着页面的其余部分滚动或者固定。 1.Scroll:默认值，背景图像会随着页面其余部分滚动而移动。 2.Fixed:当页面的其余部分滚动时，背景图像不会动。