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;
}