02CSSday01

    技术2025-06-03  45

    引入方式

    内联样式

    <标签 style=“属性:属性值;”>内容</标签>

    内部样式

    <style type="text/CSS"> 选择器{属性:属性值;}</style>

    外部样式

    <link href="url",rel="stylesheet",type="text/CSS">

    选择器

    基础选择器

    标签选择器

    标签名{属性:属性值}

    类选择器

    <div class="kd"></div> .kd{属性:属性值}

    id选择器

    <div id="kd"></div> #kd{属性:属性值}

    id和class的区别:

    使用次数不同,id是唯一的,不能重复使用

    通配符选择器

    * 选择所有的标签

    复合选择器

    .div,.span {属性:属性值}

    属性

    font字体

    font-size:字体大小 font-family:字体样式 font-weight:字体粗细 属性:normal;bold;number font-style:字体风格 属性:normal;itatic; font综合:选择器{font-style font-weight font-size(必须) font-family(必须)}

    Unicode编码

    外观

    color:文本颜色 text-align:水平对齐方式 属性:left center right line-height:行间距 一般比字号大7,8px text-indent:首行缩进 2em等于两个字的宽度 text-decoration:文本修饰 属性:none;underline;blink闪烁;overline;line-through;

    编辑器emmet语法

    生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键, 就可以生成

    如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div

    如果有父子级关系的标签,可以用 > 比如 ul > li就可以了

    如果有兄弟关系的标签,用 + 就可以了 比如 div+p

    如果生成带有类名或者id名字的, 直接写 .demo 或者 #two tab 键就可以了

    如果生成的div 类名是有顺序的, 可以用 自增符号 $

    案例

    谷歌logo

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>谷歌logo</title> <link href="index.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <span class="G">G</span> <span class="Oe">o</span> <span class="o">o</span> <span class="G">g</span> <span class="l">l</span> <span class="Oe">e</span> </div> </body> </html> .G{ color: rgb(66,133,244); } .Oe{ color: rgb(234,67,53); } .o{ color: rgb(251,188,5); } .l{ color: rgb(52,168,83); } body{ font-size: 72px; margin: 0; padding: 0; font-weight: 500; } span{ margin: 0; padding: 0; float: left; } div{ position: absolute; left: 42%; top: 20%; }
    Processed: 0.011, SQL: 9