前端基础——CSS（如何查找标签、如何添加样式）

1|0前端基础——CSS（如何查找标签、如何添加样式）

1|1一、CSS样式表

/*
主要用来调节html标签的各种样式

思考:页面都是由HTML构成的 并且页面上有很多相同的HTML标签 但是相同的HTML标签在不同的位置可能有不同的样式 我们如何区分标签

标签的两大重要属性>>>:区分标签
	1.class属性
		分门别类 主要用于批量查找	
	2.id属性
		精确查找 主要用于点对点

学习css的流程
	1.先学习如何查找标签
	2.再学习如何调整样式
*/

/*
1、CSS语法结构：
选择器 {
样式名：样式值;
样式名：样式值
}
*/

/*2、CSS注释语法：注释内容*/

/*
3、引用CSS的多种方式：
	1、head内style标签内部编写
	2、head内的link标签引入
	3、标签内通过style属性直接编写
*/

1|2二、CSS选择器

1|02.1 CSS基本选择器

/*CSS基本选择器*/

/*
1、标签选择器（直接按照标签名查找标签）
*/
div {
    color: red;
}
/*
2、类选择器（直接按照标签的class值查找标签）
*/
.c1 {
    color: green;
}
/*
3、id选择器（直接按照标签的id值精确查找标签）
*/
#d1 {
    color: yellow;
}
/*
4、通用选择器（直接选择页面的所有标签）
*/
* {
    color: black;
}

1|02.2 CSS组合选择器

/*CSS组合选择器*/

/*
1、后代选择器
例子作用范围：div内部所有层级的span标签
*/
div span {
    color: yellow;
}
/*
2、儿子选择器
例子作用范围：div内部第一个层级的所有span标签
*/
div>span {
    color: red;
}
/*
3、毗邻选择器
例子作用范围：div下面紧挨着的span标签，如果紧挨着的不是span标签，则不生效
*/
div+span {
    color: blue;
}
/*
4、弟弟选择器
例子作用范围：div下面同级的所有的span标签
*/
div~span {
    color: green;
}

1|02.3 分组与嵌套

/*多个选择器合并查找*/
div,p,span {
    color: red;
}
#d1,.c1,span{
    color: yellow;
}
/*查找指定类的指定标签*/
div.c1{
    color: blue;
}
/*
查找指定类里指定类的指定标签：
查找含有c1样式值里面的含有c2样式值的p标签
*/
.c1 p.c2{
    color: green;
}

1|02.4 属性选择器

/*按照属性名查找*/
[username] {
    color: red;
}
/*按照属性名等于确定值查找*/
[username='jason'] {
    color: yellow;
}

div[username='jason'] {
    color: blue;
}

1|02.5 伪类选择器

/*鼠标悬停时a标签的颜色显示*/
a:hover{
    color: orange;
}
/*input获取焦点后采用的样式*/
input:focus{
    background-color: green;
}

1|02.6 伪元素选择器

/*首字母调节*/
p:first-letter{
    font-size: 38px;
    color: red;
}
/*CSS添加文本，该文本无法被正常选中*/
p:before{
    content: '大风起兮云飞扬';
    color: yellow;
}
p:after{
    content: '大鹏一日同风起';
    color: blue;
}

1|3三、选择器的优先级

/*
1.选择器相同 导入方式不同
	就近原则
2.选择器不同 导入方式相同
	内联样式 > id选择器 > 类选择器 > 标签选择器
*/

1|4四、CSS样式调节

/*字体样式*/
font-size: 18px;
font-weight: lighter;
color: red;
color: #3d3d3d;
color: rgb(186,11,98);
/*rgba最后一个参数还可以控制透明度 0~1*/
color: rgba(186,11,98,0-1) 
/*文本居中*/
text-align: center;
/*a标签取消下划线*/
text-decoration: none;
/*首行缩进*/
text-indent: 32px;

/*背景属性*/
div {
    width: 1000px;
    height: 800px;
    background-color: green;
    background-image: usr("图片地址");
    background-repeat: no-repeat;  不平铺
    background-repeat: repeat-x;
    background-repeat: repeat-y;
    background-position: center center;
    background: url("图片地址") blue no-repeat center center;
}
/*当多个属性名有相同的前缀，那么可以简写，一次性写完*/

__EOF__

本文作者：少年奇妙游
本文链接：https://www.cnblogs.com/HaiMan/p/16941823.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！