Day4-课堂笔记-其他CSS标签

1.字属性

1)设置文字大小:

font-size

2)设置文字颜色:

color

3)设置字体名:

font-family

4)设置字体粗细:

font-weight (取值:100-900)

5)设置倾斜:

font-style(italic文字倾斜)

6)内容对齐方式:

text-align:(center,left,right)

7)设置行高:

line-height:(文字一行的高度,文字只要一行,设置高和标签的高度相同,可以让文字居中)

8)简写:

font:字号 行高 字体;

9)文字修饰:

text-decoration:(none:去掉文字修饰,under-line:添加下划线,line-through:添加删除线,over-line:添加上划线)

10)首行缩进:

text-indent:4em(单位:em,空格的意思)

11)字间距:

letter-spacing:1px

2.列表属性

1)设置符号样式:

list-style-type:(disc(实心圆)circle(空心圆)square(实心方块)none(去掉列表符号))

2)设置图片的符号:

list-style-image:(url(路径))

3)设置符合的位置:

list-style-position:(inside--在li标签的里面outside--在li标签的外面)

3.背景

1)背景图:background-image:url(路径)

如果背景图大于盒子大小,背景图能显示多少就显示多少
如果背景图小于盒子大小,背景图就会平铺(重复显示)

2)是否平铺

background-repeat:(不平铺:no-repeat):

3)背景图固定(不常用)

background-attachment:(固定:local 滚动:scroll)

4)设置背景图位置

background-position:(x:left/center/right/数值 y:top/center/bottom/数值)
x,y的顺序可以改变

5)简写:background:url(路径) no-repeat(是否平铺) x y(图片位置)

    background:url(路径) no-repeat(是否平铺) x y(图片位置) 背景颜色
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            p{
                /*文字大小*/
                font-size: 20px;
                /*文字颜色*/
                color: red;
                /*设置字体名*/
                font-family: "微软雅黑";
                /*设置字体粗细*/
                font-weight: 400;
                /*设置倾斜*/
                font-style: initial;
                /*内容对齐方式*/
                text-align:left;
                /*首行缩进*/
                text-indent: 2em;
                /*字间距*/
                letter-spacing: 0px;
            }
            
            
            /*============列表===============*/
            ul{
                
            }
            li{
                /*list-style-type: square;*/
                list-style-image: url(img/icon.ico);
                background-color: red;
                float: left;
                list-style-position: inside;
            }
            #d1{
                height: 300px;
                
                background-image: url(img/logo.png);
                /*background-repeat: no-repeat;
                background-position:center top;
                background-attachment: local;
                background-color: red;*/
                background: url(img/logo.png) no-repeat center white;
                
            }
        </style>
    </head>
    <body>
        <div id="d1">
            <!--<img src="img/logo.png" style="width: 100%;height: 300px;"/>-->
        </div>
        <ul>
            <li>abc</li>
            <li>123</li>
            <li>hello</li>
            <li>yes</li>
        </ul>
        <div id="">
            <p>
            的健身房搜集第三季度孤苦伶仃健康的将管理卡视角国际大酒按揭房老师就给来说简单
            空格键了圣诞节噶监督管理局点击点击罚款店高科技的数量快捷方式离开
            </p>
        </div>
        
    </body>
</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,564评论 0 6
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 11,449评论 2 66
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 5,938评论 0 2
  • 一起读书 10.《岛》:没有不忠,只有激情;没有麻风病,只有爱 9.《岛》:离开不是结束,而是一切新的开始 8.《...
    张七造梦阅读 2,994评论 0 1
  • 开学总是在九月,假期已远远的走。 开学第一课,商务英语,男老师。 因为是英语课是自己选课,班里的人来自...
    乐益思阅读 3,619评论 0 2

友情链接更多精彩内容