【前端基础】2、CSS

浮生146

于 2024-08-07 21:54:07 发布

阅读量308

点赞数 8

分类专栏： JavaWeb学习文章标签：前端 css

本文链接：https://blog.csdn.net/qq_56040271/article/details/141002109

版权

JavaWeb学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

2. CSS

2.1 CSS选择器

2.1.1 标签选择器与类别选择器、ID 选择器

<body>
    <p align="center">hello,大家好，这是第一个段落标签！</p>
    <p class="second">hello,大家好，这是第二个段落标签！</p>
    <p class="second">hello,大家好，这是第三个段落标签！</p>
    <p id="four" class="second">hello,大家好，这是第四个段落标签！</p>
</body>

1、标签选择器

/* 
1、标签选择器(选择页面中的一组元素)
说明：标签选择其中使用的是样式属性，其写法为：
样式属性: 样式属性的值;
*/
p {
    color: yellow;
    background-color: darkblue;
    width: 500px;
}

2、类别选择器

/* 
2、类别选择器(选择页面中的一组元素)
语法：
.类别名称{
    样式属性1: 样式属性值1;
    ......
}
*/
.second {
    font-family: "黑体";
    font-size: 35px;
    color: snow;
}

3、ID 选择器

/* 
3、ID选择器（只能选择页面中名称为ID的那个元素）
语法：
#id名称 {
样式属性1: 样式属性值1;
......
}
*/
#four {
    background-color: orange;
    color: blue;
}

三种基本的选择器优先级如下：
ID选择器 > 类别选择器 > 标签选择器
三者的权重值：
ID=100 类别=10 标签=1

2.1.2 后代选择器

后代选择器：空格分开的后代，可以是直接后代，也可以是间接后代。

/* 
1、后代选择器：
基本语法：
1）标签1 标签2
2）标签1 类别1
3）类别1 标签1
4）类别1 类别2
5）id选择器1 标签1
6）id选择器1 id选择器2
7）id选择器1 标签1
8）标签1 id选择器1
......
记住：只要是选择器加空格，其后再跟一个选择器，就是后代选择器
*/
p span {
    color: red;
}
.second a {
    text-decoration: none;
    color: orange;
}

<body>
    <p>
        这是第一个段落标签，请好好
        <span>设置它的属性！</span>
    </p>
    <ul>
        <li><a href="#">链接一</a></li>
        <li class="second"><a href="#">链接二</a></li>
        <li><a href="#">链接三</a></li>
        <li><a href="#">链接四</a></li>
        <li><a href="#">链接五</a></li>
    </ul>
</body>

/* 
2、直接后代选择器（使用 > 号，代表选择指定标签的直接后代）
*/
/* 无效 */
ul > a {
    color: red;
}
/* 有效 */
ul > li > a {
    color: red;
}

2.1.3 交集选择器

/* 
交集选择器
语法可能有如下形式：
1）标签.类别
2）类别#id
3）标签#id
*/
p.p1 {
    background: lightgreen !important;
}
.p1#pt {
    color: red;
    background: blue;
}
p.pt {
    background: pink;
}
p.p2 {
    background: orange;
}
/* 
注意事项：
1、p .p1 #p1: 这三种分别代表标签选择器，类别选择器，id选择器，它们的权重分别是：1 10 100
2、如果想要让某个样式属性具有最高优先级，可以使用 !important
*/

<body>
    <p class="p1 p2" id="pt">
        <span>hello,大家好！</span>
    </p>
</body>

2.1.4 并集选择器

/* 
并集选择器：可以一次性选择多个页面元素，使用逗号分隔
*/
p span,
div span {
    color: red;
    width: 500px;
    padding: 10px;
}
.p1 {
    background: lightblue;
}

<body>
    <p>
        <span class="p1"> 1、并集选择器 </span>
    </p>
    <div>
        <span> 2、并集选择器 </span>
    </div>
</body>

2.1.5 属性选择器

/* 
属性选择器：
*/
/* 1、利用属性名进行选择 */
input[type="text"] {
    border: 1px solid red;
}
/* 2、利用属性值包含有指定字符进行选择 */
/* 下面选择input标签中name属性含有s的标签 */
input[name*="s"] {
    color: blue;
}
/* 3、选择input标签中name属性以指定字符开头的标签 */
input[name^="u"] {
    background: pink;
}
/* 4、选择input标签中name属性以指定字符结束的标签 */
input[name$="d"] {
    background: blue;
    color: white;
}

<body>
    <from action="">
        姓名：<input type="text" name="username" /><br />
        密码：<input type="password" name="password" /><br />
        <input type="submit" value="提交" />
    </from>
</body>

2.1.6 伪类选择器

/* 伪类选择器 */
/* 默认超链接样式 */
a {
    color: darkblue;
}
/* 代表访问过的链接样式 */
a:visited {
    color: red;
}
/* 代表鼠标按下的样式 */
a:active {
    color: pink;
}
/* 代表鼠标移入时的样式 */
a:hover {
    color: darkgray;
    text-decoration: none;
    font-style: italic;
}
/* 默认表格样式 */
table {
    border-collapse: collapse;
    width: 500px;
    text-align: center;
}
td {
    border: 1px solid gray;
}
/* 代表鼠标移入某一行时的样式 */
tr:hover {
    background-color: lightyellow;
    color: pink;
    cursor: pointer;
}

<body>
    <a href="http://www.baidu.com">到百度</a> <br />
    <table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>住址</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>20</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>19</td>
            <td>杭州</td>
        </tr>
    </table>
</body>

2.2 CSS盒子模型

2.2.1 边框属性

div {
    width: 500px;
    height: 100px;
    background-color: pink;
    margin-bottom: 20px;
}
/*1. 一次设置四个值 (上 右 下 左)
注意：盒子的边框有三个子属性
边框粗细：border-width
边框样式：border-style
边框颜色：border-color
*/
#d1 {
    border-width: 10px 8px 6px 4px;
    border-style: solid dotted dotted solid;
    border-color: red blue green purple;
}
/*2. 设置三个值（上 左右 下）*/
#d2 {
    border-width: 10px 8px 4px;
    border-style: solid dotted dashed;
    border-color: red blue green;
}
/*3. 设置两个值（上下 左右）*/
#d3 {
    border-width: 10px 6px;
    border-style: solid dotted;
    border-color: red blue;
}
/*4. 设置一个值（四条边一样）*/
#d4 {
    /*border-width:8px;*/
    /*border-style: solid;*/
    /*border-color: red;*/
    /*可以简化为：*/
    border: 8px solid red;
}

<body>
    <!--1. 盒子的边框-->
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</body>

2.2.2 内补丁属性

#d {
    width: 500px;
    height: 100px;
    background-color: blue;
    padding-top: 20px;
    padding-left: 20px;
}

#d1 {
    width: 300px;
    height: 60px;
    background-color: pink;
}
span{
    border:1px solid red;
}
#sp1{

    padding-top: 10px;
    padding-bottom: 20px;
}
/*设置三个值的内补丁（上 左右 下）*/
#sp2{
    padding: 20px 15px 10px;
}
/*设置两个值的情况 (上下 左右)*/
#sp3{
    padding: 20px 10px;
}
/*设置一个值的情况 (上右下左 四个方向完全一致)*/
#sp4{
    padding: 20px;
}

<body>
    <div id="d">
        <div id="d1">子盒子</div>
    </div>
    <span id="sp1">这是盒子1</span>
    <span id="sp2">这是盒子2</span>
    <span id="sp3">这是盒子3</span>
    <span id="sp4">这是盒子4</span>
</body>

2.2.3 外补丁属性

div{
    background-color: pink;
    width: 500px;
    height: 100px;
}
/*垂直的盒子的间距等于：上边的盒子的下边距与下边盒子的上边距二者之间取最大值。*/
.d1{
    margin-bottom: 10px;
}
.d2{
    margin-top: 20px;
}

/*水平的span有默认的间距, 它们的间距相当于：左边盒子的右边距和右边盒子的左边距之和。*/
span{
    border: solid red 1px ;
}
.sp1{
    margin-right: 10px;
}
.sp2{
    margin-left: 10px;
}

<body>
    <div class="d1">盒子一</div>
    <div class="d2">盒子二</div>
    <div class="d3">盒子三</div>

    <span class="sp1">行内盒子一</span>
    <span class="sp2">行内盒子二</span>
    <span class="sp3">行内盒子三</span>
</body>

2.2.4 盒子的浮动

li {
    background-color: pink;
    float: left;
    margin-right: 2px;
    padding: 5px 10px;
}

ul {
    list-style: none;
    border-bottom: 1px solid pink;
}

/* 解决浮动塌陷 */
/* 百度的解决方法 */
.clearfix:after {
    content: '\20';
    display: block;
    height: 0;
    clear: both
}
/* 新浪的解决方法 */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

<body>
    <ul class="clearfix">
        <li>新闻</li>
        <li>娱乐</li>
        <li>体育</li>
        <li>军事</li>
        <li>音乐</li>
        <li>其它</li>
    </ul>
</body>

2.2.5 盒子的定位

*{
    padding:0;
    margin: 0;
}
div{
    width: 500px;
    height: 100px;
    background-color: orange;
}
/*1. 固定定位的盒子：以浏览器边框作为定位基准(参照物)！*/
#d1{
    position: fixed;
    top: 10px;
    left: 10px;
}
/*2. 相对定位的盒子：对盒子本身应该出现的位置为定位基准(参照物)！*/
#d2{
    background-color: blue;
    margin-top:150px;
    margin-left:20px;
    position: relative;     /*相对定位*/
    top: 20px;
    left: 30px;
}
/*3. 绝对定位的盒子：以设置了position属性并且不为static的最近的父盒子作为定位基准(参照物)！*/
#d3{
    margin-top: 60px;
    position: relative;     /* 父盒子设置为相对定位*/
}
#d3_1{
    background-color: red;
    width: 200px;
    height: 50px;
    position: absolute;     /* 子盒子设置为绝对定位*/
    top:20px;
    left:15px;
}

<body>
    <!--1. 盒子的固定定位： 定位基准：以浏览器边框作为定位基准~!-->
    <div id="d1">盒子一（固定定位）</div>
    <!--2. 盒子的相对定位：对盒子本身应该出现的位置作为定位基准。-->
    <div id="d2">盒子二（相对定位）</div>
    <!--3. 绝对定位的盒子：以盒子的所有的父盒子中哪些设置了position属性并且不为static的离子盒子最近的父盒子作为定位基准！
(子绝父相: 即子盒子设置为绝对定位，父盒子设置了相对定位！)
-->
    <div id="d3">
        <div id="d3_1">子盒子(绝对定位)</div>
    </div>
</body>

2.2.6 盒子的显示与隐藏

div{
    background-color: orange;
    margin-bottom: 10px;
    padding:5px 10px;
}
/*1. 使用display:none隐藏盒子会自动让出原来的位置（平时的前端页面中使用较多）*/
.d2{
    display: none;
}
/*2. 使用visibility属性进行层的显示也隐藏不会让出原来的位置*/
.d12{
    visibility: hidden;
}

<body>
    <!--1. 使用display属性进行盒子的显示与隐藏-->
    <h3>1. 使用display属性进行盒子的显示与隐藏<hr></h3>
    <div class="d1">盒子一</div>
    <div class="d2">盒子二</div>
    <div class="d3">盒子三</div>
    <!--2. 使用visibility属性进行盒子的显示与隐藏-->
    <h3>2. 使用visibility属性进行盒子的显示与隐藏<hr></h3>
    <div class="d11">盒子11</div>
    <div class="d12">盒子12</div>
    <div class="d13">盒子13</div>
</body>