• 【CSS】基础CSS样式属性


    文字类:

    设置文字字体:

    font-family:

     可以直接使用中文,例如:"font-family: 宋体;"

    可以写多个,浏览器会依次查找,直到找到用户拥有的对应字体文件(即你要是用了花里胡哨的字体,人家没对应的字体文件也白搭,建议使用常见的字体,例如黑体、微软雅黑之类的)

     

    设置字体大小:

    font-size:

     谷歌默认字体大小是16像素.

    由于不懂用户会使用什么奇奇怪怪的浏览器,所以尽量设置一下全局默认字体大小.

     设置字体粗细:

    font-weight:

    可写具体数值大小(非像素),也可以写

    "normal"表示正常粗细,数值为400.

    "bold"表示加粗,数值为700.

    "bolder"表示特粗.

    "lighter"表示细.

    常用来把奇奇怪怪的字体粗细变回正常,即400.

    最大值为900.

    设置字体样式:

    font-style:

    "normal":正常样式.

    "italic":倾斜.

    常用来把倾斜的字体变成正常.

     设置水平对齐:

    text-align:

     "center":居中对齐.

    "left":靠左对齐.

    "right":靠右对齐.

     装饰文本样式:

    text-decoration:

    "none":无特殊样式

    "underline":下划线

    "overline":上划线

    "line-through":删除线

    除了"none"和"underline"以外,其他基本不用.主要用来把字体变回正常状态,例如将链接的下划线取消. 

    另外去除列表的装饰为:"list-style:none"

     设置字体颜色:

    color:

    可以直接用英文写颜色:"red"、"blue"、“green”……

    可以用RGB来写:rgb(0,0,0)……

    CSS3可用RGBA来写(相比较RGB,多了最后一位透明度):rgba(100,100,100,0.3)……

    可以用十六进制来写:#666666……

    可以设置为透明:"transparent"

     设置文本缩进:

    text-indent

     可用2em来缩进两个文字距离,em代表父元素的字体大小。例如父元素字体大小为16px,2em=32px就是两个文字的距离。

    设置行间距:

    line-height

     如果想要文字在块元素中垂直居中,可将其行间距改成与块元素高度一致。

     设置文字阴影:

    text-shadow:水平阴影位置  垂直阴影位置  模糊距离  模糊颜色

    文字复合写法:

    fontfont-style font-weight font-size/line-height font-family

    顺序不能乱,并且其中font-size和font-family为必写项(即其可以省略).

     背景类:

    设置背景颜色:

    background-color

     和上面设置字体颜色一样

    设置背景图片:

    background-image:url("具体路径")

    设置背景图片平铺:

    background-repeat:

     "no-repeat":不平铺,若图片无法铺满也不再添加图片了,即只加一张背景图.

    "repeat":平铺.若图片无法铺满则向x和y轴再添加图片,直到铺满某一轴.

    "repeat-x":x轴上平铺,若图片无法铺满,则向x轴再加图片,直到x轴铺满.

    "repeat-y":y上平铺,若图片无法铺满,则向y轴再加图片,直到y轴铺满.

    一般使用"no-repeat",若无法填满盒子则修改图片大小.

    设置背景图片大小: 

    background-size:

    可以填具体的宽、高像素大小.

    可以填“cover”:等比缩放至覆盖全图。

    可以填“contain”:等比缩放使得背景图达到最大,即图片宽与盒子宽一致或是图片高与盒子高一致。

    设置背景位置:

    background-position

    可以设置具体的x、y值,x轴上右为正方向,y轴上下为正方向。

    可以用方位名词:“right”“left”“center”“top”

    可以用百分比:以自身大小为标准。

     背景固定:

    ground-attachment:

    “scroll”:背景随内容而滚动。

    “fixed”:背景固定。

    背景属性复合写法:

    background:背景颜色 背景图片 是否平铺 是否固定 背景位置

    例子:

    源代码:

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Titletitle>
    6. <style>
    7. .one {
    8. font-family: 宋体;
    9. font-size: 50px;
    10. font-weight: 900;
    11. color: rgba(200, 0, 0, 0.3);
    12. }
    13. .two {
    14. font: italic 400 16px/20px 黑体;
    15. text-align: center;
    16. text-decoration: underline;
    17. color: rgb(128, 118, 163);
    18. text-shadow: 10px 10px 10px gray;
    19. }
    20. .three {
    21. width: 400px;
    22. height: 400px;
    23. border: 2px solid black;
    24. background: #63bbd0 url("../素材/素材/image/animal/animal4/all.jpg") no-repeat scroll right;
    25. background-size: 300px;
    26. }
    27. style>
    28. head>
    29. <body>
    30. <p class="one">宋体p>
    31. <p class="two">这是一段话p>
    32. <div class="three">div>
    33. body>
    34. html>

  • 相关阅读:
    webpack之处理js资源之eslint
    猿创征文|搭建第一个Spring Boot项目
    Tomcat配置SSL证书
    Shell 脚本特殊变量列表
    如何结合整洁架构和MVP模式提升前端开发体验(二) - 代码实现篇
    软考初级网络管理员__网络单选题
    9.FPN网络代码实现
    游戏编程模式 - 对象池模式
    ENVI_IDL: 批量制作专题地图
    NetCore开发的分布式文件上传系统
  • 原文地址:https://blog.csdn.net/m0_63235356/article/details/126327959