当前位置：首页 > Web开发 > 正文

css根本1

2024-03-31 Web开发

/css根本入门/
/css语法布局选择器{属性名: 属性值；属性名2: 属性值2}/

/css三种引入方法：/
/1.通过标签引入css文件（最正规的写法）/
/2.在中的内直接写css代码/
/3.标签内的style属性中直接写css代码/

/查找标签的六种选择器/
/根基选择器，组合选择器，属性选择器，分组与嵌套。伪类选择器，伪元素选择器/

/根基选择器/

/标签选择器/
/将页面上所有的div内部的文本酿成红色/
div{
color: red;
}

/类选择器（标签中要有class属性，如class=‘c1’）/
/让所有具有c1类属性值的标签内部文本酿成蓝色/
.c1{
color: blue;
}

/id选择器（标签中要有的id属性，如id=‘d1’）/
/将id为d1的标签内部文本内容改为绿色/

d1{ color: green;

}

/通用选择器/
/页面上所有的标签统一改削样式/
*{
color: aqua;
}

/组合选择器/

/儿女选择器(div标签，所有被span包孕的内容城市当选择！)/
/div内部的所有的span/
div span{
color: red;

}

/儿子选择器(div>span暗示div内部最靠近div那一层的span，其包罗的内容城市当选择)/
div > span{
color: red;

}

/相邻选择器（此时选择的是紧靠着

的标签中的内容，此时span在div外部）/
div + span{
color:red;
}

/同级选择器（选择div标签后面，与div并列的同级另外span标签中的内容）/
div ~ span{
color: deeppink;
}

/属性选择器/

/指定属性名/
/找到页面上所有具有username属性名的标签/
[username]{
background-color: deeppink;

}

/指定属性名和属性值/
/找到页面上属性名是username并且属性值叫joe的标签/
[username = ‘Joe‘]{
background-color: black;
}

/指定某一类标签中的属性名与属性值/
/找到页面上input标签，且属性名是username，，属性值叫joe/
input[username=‘Joe‘]{
background-color: aqua;
}

/分组与嵌套/

/分组与嵌套，就是根基选择器与组合选择器结和起来使用/
div, p, span{
color: green;
}

/找具有c1属性值的标签儿女的h1 儿女选择器与类选择器的结合/
.c1 h1{
color: green;
}

/伪类选择器/

/鼠标悬浮在超链接上显示的颜色/
a：hover{
color: black;
}

/鼠标点击一瞬间未松开时的颜色/
a:active{
color: green;
}

/访谒过该超链接之后的颜色/
a:visited{
color: gray;
}

/标签的伪类选择器/
/聚焦focus到input框时的配景颜色/
input:focus{
background-color: red;
}

/伪元素选择器/
/p标签内的首字母大写/
p:first-letter{
color: red;
font-size: 48px;
}

/在p标签之前加上content里的内容/
p:before{
content: ‘你好啊‘;
color: red;
}

/在p标签之后加上content里的内容/
p:after{
content: ‘?‘;
color: blue;
}