知识点

  • CSS基本使用
  • CSS选择器
  • CSS字体/文本
  • CSS背景

CSS导入方式三种

1、行内样式：直接写在现有的HTML标签里
        比如<p style="color:red;font-size:12px;">233333333</p>

    2、内部样式：把CSS样式直接写在当前页面的头部标签中
            <style type="tsxt/css">
                样式规则：选择器{属性：属性值}
            </style>

    3、外部样式：<link href="要引入的网址" rel="stylesheet"

代码从上往下执行

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

选择器

基本：
标签选择器 标签名
类选择器   .
ID选择器   #

其他：
后代 .div span
子代 .div>span
兄弟 .div~span 向下执行相同的
相邻 .div+span 
全选择器 *
div,span{ }  可以节省重复代码
伪类选择器 link 未访问的
           visited 访问后的
           hover 划过
           active 激活状态的

字体 font

文本属性：
    常见的文本样式：
        color：字体颜色
        font-size：字体大小
        font-family：字体类型
        <strong>：字体加粗
        font-weight：bold  字体加粗
        <em> 斜体
        font-style：italic斜体   normal（正常）
        div--层标签
        text-decoration：underline(有下划线) none(无下划线)设置下划线
                 line-through:删除线
        text-align：center  文本居中对齐方式   left：对左   right：对右
        line-height：行间距
        letter-spacing:字符间距
        border-radius:  px
        text-indent: 2em首行缩进
        Div+css布局方式
        height+line-height文字上下居中
        test-align：center文字水平居中
背景属性：
        background-color:背景颜色
        background-image:url(图片路径);
        background-repeat:no-repeat;图片不重复
        background-repeat:repeat-x(向x轴延伸)
        background-repeat:repeat-y(向y轴延伸)
        background-position:图片偏移;
        dispaly:inline;  转内联
        dispaly:block;  转块状
        dispaly:inline-block; 转内联块状
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄