web前端 (06)CSS 02 +选择器+常用样式_web文件选择目录样式-CSDN博客

本文链接：https://blog.csdn.net/weixin_44075537/article/details/85035469

目录
    在CSS中如何编写注释
选择器
    光标悬停 ***
常用样式
    背景颜色 ***
    背景图片 ***
边框样式 ***

在CSS中如何编写注释

与Java中的多行注释完全一致

/* 注释的内容 */

选择器
选择器组了解

通过多个选择器, 组合起来, 锁定一个或多个元素 !
(当元素满足组合中的所有选择器时, 才会被选择)

格式:
元素名称选择器其他选择器1其他选择器2…其他选择器n{

案例:
修改元素名称为div , 且class属性值为xxx的元素的字体大小为 40px
div.xxx{
font-size:40px;
}

组选择器了解

通过多个选择器, 组合起来, 锁定一个活多个元素 !
(当元素满足组合中的任意一个选择器时, 就会被选择)

格式:
选择器1,选择器2,…选择器n{

案例:
修改元素名称为div , 或class属性值为xxx的元素的字体大小为 40px
div,.xxx{
font-size:40px;
}

派生选择器 *
子选择器 *

语法:
父选择器>子选择器{

作用:
从父选择器选择的元素中, 选择子元素选择器匹配的子元素 !

案例:
设置所有div中的子元素div 文本颜色为红色
div>div{
color:red;
}

后代选择器 *

语法:
父选择器后代选择器{

作用:
从父选择器选择的元素中, 选择后代元素选择器匹配的后代元素 !

案例:
设置所有div中的后代元素p 文本颜色为红色
div p{
color:red;
}

伪类选择器
超链接状态了解

未被访问的状态
:link{}
点击时的状态
:active{}
访问后的状态
:visited{}

案例:

访问前 访问后统一为 #333 的颜色 .  激活时 #a33 颜色

:link,:visited{
    color:#333;
}
:active{
    color:#a33;
}

光标悬停 ***

指的是当鼠标从元素上滑入时 , 更改指定样式 !
当鼠标从元素上滑出时 , 还原原有样式 !

格式:
选择器:hover{
样式列表;
}

案例:
展示一排图片, 光标移入某图片更改其大小:

<style type="text/css">
    img{
        width:250px;
    }
    img:hover{
        width:600px;
    }
</style>
</head>
<body>
    <img src="images/3.jpg"><img src="images/4.jpg"><img src="images/5.jpg"><img src="images/6.jpg">
</body>

获取焦点了解

指的是当元素获取焦点时 , 更改指定样式 !
当元素失去焦点时 , 还原原有样式 !

焦点(指的是输入组件获取到输入状态 )(输入框/按钮/单选框/复选框等等…)

格式:
选择器:focus{
样式列表;
}

案例:

当输入框输入内容时, 修改输入框的文本颜色为#3a3;
input:focus{
    color:#3a3;
}

筛选选择器了解

从某一个选择器的结果中, 筛选出需要部分:

-   排除选择器:
        格式: 选择器1:not(选择器2) : 从选择器1的结果中, 排除选择器2的结果 !

-   匹配第一个元素
        格式: 选择器:first-child : 从选择器的结果中, 选择第一个元素
        例如: div:first-child: 选择第一个div元素

-   匹配最后一个元素
        格式: 选择器:last-child  :   从选择器的结果中,选择最后一个元素

-   根据选择的元素下标, 选择元素: 
        格式: 选择器:nth-child(下标)   :   从选择器的结果中,选择指定下标的元素

-   根据选择的元素倒序下标, 选择元素: 
        格式: 选择器:nth-last-child(下标)  :   从选择器的结果中,选择指定下标的元素

常用样式
背景样式
背景颜色 ***

background-color:颜色值;

背景图片 ***

background-iamge:url(“图片路径1”),url(“图片路径2”),…url(“图片路径n”);

背景图片可以指定1-n个图片路径url , url之间使用逗号隔开 !
多张图片作为背景时 , 会堆叠显示, 堆叠的顺序为: URL定义的越靠前, 显示时越考上!

一般我们给元素设置多个图片背景时 , 上层的图片应是透明或半透明的 !

背景图片控制 - 平铺了解

格式:
background-repeat:
取值:
- 默认平铺 : repeat;
- 横向平铺 : repeat-x;
- 垂直平铺 : repeat-y;
- 不平铺 : no-repeat;

背景图片控制 - 缩放了解

格式:
background-size:宽度% 高度%;

背景图片控制 - 滑动了解

background-attachment
取值:
- 默认 : scroll
- 固定 : fixed

背景图片的定位 (精灵图片的使用) 熟悉

background-position:x偏移值 y偏移值; 偏移值都是负数或0

使用步骤:
1. 创建一个与精灵图片中图标宽高一致的div元素 !
2. 将精灵图片设置为此元素的背景图片
3. 通过background-position指定图片x轴与y轴的偏移值 !

代码案例:

边框样式 ***

格式1.
一个样式, 直接指定四个方向的边框!
border:宽度px 样式值颜色值;

格式2.
单独指定每一个方向的边框
border-left:宽度px 样式值颜色值;
border-top:宽度px 样式值颜色值;
border-right:宽度px 样式值颜色值;
border-bottom:宽度px 样式值颜色值;

样式值的取值:
- 虚线边框 :dashed
- 实线边框 :solid
- 点组成边框:dotted
案例:
#d1{
border:1px solid red;
}
#d2{
border-left:10px solid #33a;
border-right:1px solid #33a;
text-align: center;
}

圆角边框 (CSS3) ***

格式1. 一个样式直接指定四个角的圆角样式
border-radius:圆角宽度; //宽度的值可以使用px 或百分比! 50%表示圆形 (正方形显示为正圆 , 长方形显示为椭圆)

格式2.
单独指定四个角的圆角:
左上角: border-top-left-radius:圆角宽度;
右上角: border-top-right-radius:圆角宽度;
右下角: border-bottom-right-radius:圆角宽度;
左下角: border-bottom-left-radius:圆角宽度;

案例: