HTML学习笔记记录---速预CSS(1) 选择器类型

选择器

选择器内可以写无数条属性

每行属性都得以英文分号结尾

选择器{

属性1:属性值1;

属性2:属性值2;

}

例:

css 复制代码
p{
    color:blue;        颜色
    font-size:16px;    字号大小(像素)
}

样式表优先级:

内联样式(inline styles) 最高优先级

内部样式表(internal stylesheet)

外部样式表(extrnal stylesheet) 最低优先级

指令笔记:

link 导入文件 href 文件的路径

background-color 背景颜色

font-family:'名称'; 设定字体(须用单引号)

weight 字体粗细

选择器类型:

css选择器可以在"style"设置格式时对"h2、h3"这样的级别段落进行统一设置,也可以对"body"内容下所设定的"class"(类)或"id"进行统一设置。

类选择器:".名称{ }"格式。

id选择器:"#名称{ }"格式。

元素选择器:"名称{ }"格式。

通用选择器:

"*{ }"格式,"*"代表的是所有类型子元素选择器:".father > .son{ }"指father标签下的子元素,可以是"p、h2等及其他标签名称"

例如:

css 复制代码
.father > .son{
            color: seagreen;
        }

<div class="father">
        <p class="son">子元素</p>
    </div>

后代选择器:

"father"下"div"是子元素。"div"中的"grandson"不是子元素,属于"孙子"级别为后代元素,所以须使用后代选择器".father p{ }"来对其修改样式属性。

例如:

css 复制代码
.father p{
            color: gold;
        }

 <div class="father">
        <p class="son">子元素</p>
        <div>
            <p class="grandson">后代元素</p>
        </div>
    </div>

相邻元素选择器:

会将相邻并指定类型的元素标签赋予指定的属性。

例如:

css 复制代码
 h3 + p{
            background-color: blue;
        }

<p>普通标签</p>
<h3>相邻元素选择器</h3>
<p>另一个普通标签</p>

此命令会给"h3"相邻的"p"标签添加蓝色底纹,他只能给"h3"下面的进行添加,无法对上面的进行修改。

同时若有标签隔开了"h3"与"p"则不进行任何效果修改。

css 复制代码
<p>普通标签</p>
<h3>相邻元素选择器</h3>
<h2>隔开</h2>
<p>另一个普通标签</p>  

伪类选择器:

用于添加一些互动效果。

例如:当鼠标放在指定文本上时,会对文本的颜色进行修改,离开时恢复原样。

css 复制代码
#weileitest:hover{
            color: brown;
        }

<h3 id="weileitest">鼠标悬停修改颜色</h3>
相关推荐
石金龙2 小时前
[译] Composition in CSS
前端·css
天天扭码3 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户458203153173 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css
葡萄城技术团队9 小时前
所有网站通用:6 行 HTML 代码搞定页面加载提速
html
糖糖TANG11 小时前
从零开始制作我的第一个静态网页——教师节主题首页开发记录
html
会豪11 小时前
CSS 动画属性精讲:从基础到实战
前端·css
前端Hardy1 天前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy1 天前
HTML&CSS:好精致的导航栏
前端·javascript·css
前端老鹰1 天前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
墨渊君1 天前
“蒙”出花样!用 CSS Mask 实现丝滑视觉魔法
前端·css