ikkhksvu 发表于 2024-6-30 08:10:10

css样式


    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">样式三种写法：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1：内部样式 存在在head标签中</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2：内联样式 以属性style的方式添加在标签中</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">3：<span style="color: black;">外边</span>样式 创建独立的html页面，并在页面head标签中添加</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">&lt;link rel="stylesheet" href="css文件<span style="color: black;">位置</span>"&gt; &gt;创建独立的css文件</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">另一种引入方式：在style标签第一行添加@import url(css/style.css);</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">样式权重</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">外边</span>样式 内部样式&lt;内联样式(就近原则)</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css<span style="color: black;">选取</span>器</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">类型<span style="color: black;">选取</span>器（标签<span style="color: black;">选取</span>器）：div span h1 p...</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">类<span style="color: black;">选取</span>器：选中指定的元素，在一个页面中<span style="color: black;">能够</span>多次<span style="color: black;">显现</span></p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1：在标签中添加属性class="mz"</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2:在样式中的<span style="color: black;">选取</span>器 .mz{}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">id<span style="color: black;">选取</span>器：选中指定的元素，在一个页面中只<span style="color: black;">准许</span><span style="color: black;">显现</span>一次</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1：在标签中添加属性id="mz"</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">2:在样式用添加<span style="color: black;">选取</span>器 #mz{}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">伪类<span style="color: black;">选取</span>器：</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">：link{} 未<span style="color: black;">拜访</span>之前的状态</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">：visited{} <span style="color: black;">拜访</span>过后的状态</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">：hover{} 鼠标悬停的状态</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">：active{} 鼠标按下的状态</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">重视</span>：有<span style="color: black;">次序</span><span style="color: black;">需求</span> love hate</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">通配符 * 匹配页面所有的元素，进行统一操作</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">群组<span style="color: black;">选取</span>器 <span style="color: black;">选取</span>器1,<span style="color: black;">选取</span>器2,<span style="color: black;">选取</span>器3{}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">包括</span><span style="color: black;">选取</span>器（后代<span style="color: black;">选取</span>器） <span style="color: black;">选取</span>器1 <span style="color: black;">选取</span>器2 <span style="color: black;">选取</span>器3{}</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">选取</span>器权重对比</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">id &gt; class &gt; 类型<span style="color: black;">选取</span>器</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">100 10 1</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">内联样式<span style="color: black;">选取</span>器权重1000</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">包括</span><span style="color: black;">选取</span>器权重值 为各个<span style="color: black;">选取</span>器权重之和</p>
    <p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">css层叠:指的是优先加载权重值高的，除非有添加！important</p>




wrjc1hod 发表于 2024-9-27 04:12:13

我深受你的启发，你的话语是我前进的动力。

nykek5i 发表于 2024-10-12 10:00:19

感谢楼主分享，祝愿外链论坛越办越好！
页: [1]
查看完整版本: css样式