css基础入门1
css基础入门
css语法结构 选择器｛属性名：属性值；属性名2：属性值2｝
css三种引入方式
1.通过<link>标签引入css文件 这是最正规的写法
2.在<head>中的<style>内直接写css代码
3.标签内的style属性中直接写css代码
查找标签的六种选择器
基本选择器，组合选择器，属性选择器，分组与嵌套，伪类选择器，伪元素选择器
基本选择器
1.标签选择器
将页面上所有的div内部的文本变成红色
div{
color:red;
}
2.类选择器
让所有的具有c1类属性值的标签内部文本变成蓝色
.c1{
color:blue;
}
3.id选择器（标签中要有id属性，如id=‘d1’）
将id为d1的标签内部文本内容改成绿色
#d1{
color:green;
}
4.通用选择器
页面上所有的标签统一修改样式
*{
color:aqua;
}
组合选择器
1.后代选择器（div标签，所有被span包括的内容都会被选择！）
div span{
color:red;
}
2.儿子选择器
表示div内部最靠近div那一层的span，其包含的内容都会被选择
div > span{
color: red;
}
3.相邻选择器（此时选择的是紧靠着<div></div>的<span>标签中的内容，此时的span在div的外层）
div + span{
color: deeppink;
}
4.同级选择器(选择div标签后面，与div并列的同级别的span标签中的内容)
div ~ span{
color: deeppink;
}
属性选择器
指定属性名，找到页面上所有具有username属性名的标签
[username]{
background-color: deeppink;
}
指定属性名和属性值，找到页面上属性名是username并且属性值叫joe的标签
[username='Joe']{
background-color: black;
}
指定某一类标签中的属性名和属性值，找到页面上input标签，且属性名是username，属性值叫joe
input[usrname='Joe']{
background-color:aqua;
}
分组与嵌套
分组与嵌套，就是基本选择器与组合选择器结和起来使用
div, p, span{
color: green;
}
找具有c1属性值的标签 后代的h1 后代选择器与类选择器的结合
.c1 h1{
color: green;
}
伪类选择器
关于标签<a>的伪类选择器，主要关注a:hover鼠标悬浮时颜色
超链接正常显示的颜色
a:link{
color: aqua;
}
鼠标悬浮在超链接上显示的颜色
a:hover{
color: black;
}
鼠标点击一瞬间未松开时的颜色
a:active{
color: green;
}
访问过超链接之后的颜色
a:visited{
color: gray;
}
标签<input>的伪类选择器
聚焦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;
}
