【Java学习笔记】——CSS3.0

printf("男孩");

于 2022-11-17 08:35:46 发布

阅读量131

点赞数

文章标签： css3 学习 css

本文链接：https://blog.csdn.net/qq_52970412/article/details/127841227

版权

【Java学习笔记】————CSS篇

CSS是啥，以及有什么优点我就不介绍了。

CSS入门了解

内置样式
直接在html代码页面添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- （此行代码为html代码中的注释）style 标签里是js语法 -->
    <style>
    /* 这里面是js语法，所以注释要这么写*/
        h1 {
            color: red;
        }
		选择器 {
			声明1;
			声明2;
			声明3;
		}

    </style>
    
</head>
<body>

<h1>这是一个一级大标题</h1>

</body>
</html>

在这里插入图片描述

外置样式

	<!-- 代替上面的style标签采用引用自己已经写好的css文件 -->
    <link rel="stylesheet" href="../css/style.css">

CSS的三种导入方式

行内样式

<span style="color: blue">This is a span</span>

内部样式(内置样式)
外部样式(外置样式)
拓展：css2.1特有
1. 链接式
2. 导入式：@import url(“Path”);
优先级：行内>内部>外部（就近原则）

选择器

作用：选择页面上的某一个或某一类元素

基本选择器
类选择器（.class名）可以分组复用
id选择器（#id名）全局唯一
优先级：id选择器>类选择器>基本选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        /* 基本选择器 */
        span {
            color: red;
        }

        /* id选择器 */
        #span2 {
            color: blue;
        }

        /* class选择器 */
        .span3 {
            color: green;
        }

    </style>

</head>
<body>

    <span>This is a span</span>
    <span id="span2">This is a span</span>
    <span class="span3">This is a span</span>

</body>
</html>

层次选择器

后代选择器空格
子选择器 >
相邻兄弟选择器 +
通用兄弟选择器 ~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 后代选择器：选取body下所有的p标签 */
        body p{
            color: red;
        }

        /* 子选择器：选取body下直接子元素p标签 p1 p2 p3 */
        body>p{
            color: green;
        }

        /* 相邻兄弟选择器:选择指定标签的下一个相邻的同级标签 p3 */
        .active+p{
            color: blue;
        }

        /* 通用选择器：选择指定标签的下面所有同级标签 p3 p7 */
        .active~p{
            color: blue;
        }
    </style>

</head>
<body>

<p>p1</p>
<p class="active">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
<p>p7</p>

</body>
</html>

结构型伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--使用伪类选择器（元素：条件） 避免使用id和class选择器 -->
    <style>

        /* ul的第一个子元素 */
        ul li:first-child{
            background-color: red;
        }

        /* ul的最后一个子元素 */
        ul li:last-child{
            background-color: green;
        }

        /* 选中p1：线定位到父元素，再选择父元素中的p1 ，按 ！顺序！ 选择，可能会被其他元素挡住 */
        p:nth-child(1){
            background-color: yellow;
        }

        /* 选中父元素下的第二个p元素 p2， 按照元素 ！类型！来选择 */
        p:nth-of-type(2){
            background-color: blue;
        }

        /* 拓展：hover:鼠标移动到超链接上会有效果 */
        a:hover{
            background-color: pink;
        }

    </style>
</head>
<body>

<a href="">Hello</a>

<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>aaa</li>
    <li>aaa</li>
    <li>aaa</li>
</ul>
<p>p7</p>


</body>
</html>

属性选择器

标签[属性/属性=“属性值”/*=]
id和class选择器结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 属性选择器：  元素[属性]
                      元素[属性=属性值] （= 绝对等于）
                      元素[属性*=属性值] （*= 存在）
                      元素[属性^=属性值]  （^= 以属性值为开头）
                      元素[属性$=属性值]   ($= 以属性值为结尾)

     -->
    <style>

        /* 选中所有带有id属性的 a标签 */
        a[id]{
            background: red;
        }

        /* 选中class属性值为 links 的a标签 */
        a[class="links"]{
            background: green;
        }

        /* 选中class属性值带有 item 的a标签 */
        a[class*="item"]{
            background: blue;
        }

        /* 选中href属性值以 http开头 的a标签 */
        a[href^="http"]{
            background: yellow;
        }
        
        /* 选中href属性值以 html结尾 的a标签 */
        a[href$="html"]{
            background: pink;
        }


    </style>
</head>
<body>

<a href="http://www.baidu.com" class="links item first">1</a>
<a href="https://www.qq.com" class="links item second">1</a>
<a href="" class="links" id="third">1</a>
<a href="" class="links">1</a>
<a href="" class="links">1</a>
<a href="index2.html" class="links">1</a>


</body>
</html>

美化网页

字体样式

font-family (修改字体)
font-size (字体大小)
font-weight (粗体)
font:oblique bold 16px “楷体”;
上面这一种是全部写在一起了

文本样式

颜色
- color：red；
- color：rgba(0，0，0，0.5)
  rgb参数和透明度参数
文本对齐方式
- text-align:center; (居中对齐)
首行缩进
- text-indent:2em; (首行缩进2个字)
行高
- line-height:10px; (行内高度，当内容的行高与块的高度一致时，可以达到上下居中)
装饰
- text-decoration:underline / overline / line-through;
  下划线/上划线/中划线
文本图片水平对齐
- 水平对齐需要参照物，将需要水平对齐的两个元素放一块
- vertical-align:middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        img, span {
            vertical-align: middle;
        }


    </style>
</head>
<body>

<p>
    <img src="../img/deskimg.jpg" >
    <span>aaaaaaaaaaaaaaaaaaaaaaaaa</span>

</p>

</body>
</html>

文本阴影

text-shadow:1px 1px 1px #ffffff;

背景图像应用及渐变

背景颜色
background-color:red;
背景图片
1. background-image:url(“path”);
2. background-repeat:repeat-x;(水平平铺)
3. background-repeat:repeat-y;(垂直平铺)
4. background-repeat:no-repeat;(不平铺)
5. background: red url(“path”) no-repeat; (写一块)
渐变
1. background:linear-gradient(115deg, #FFFFF 0%, #6248FF 50%, #FF0000 100%);

盒子模型

margin：外边距
padding：内边距
border：边框

边框

边框的粗细
边框的样式
边框的颜色
写一块就可以了：
- border: 1px solid black;

外边距

margin： 0 0 0 0；
四个参数全写：上右下左
不足四个参数：上左下右

内边距

盒子大小：margin + border + padding + 内容宽度

圆角边框

border-radius:0 0 0 0;
左上右上右下左下（顺时针）

盒子阴影

box-shadow:0 0 0 #000000;

display和浮动

display
1. block:块元素
2. inline：行内元素
3. inline-block：行内块元素，是块元素，可以内联在一行
浮动
可以把块元素变成像行内元素一样在一行

父级边框塌陷问题

解决方案：

增加父级元素的高度
在父级元素后增加一个空的div，清除浮动
在父级元素中增加一个overflow
父类中添加一个伪类：after。跟第二种方法的优化

小结：
1. 浮动元素后面加空div
简单，代码中尽量避免空div
2. 设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
3. overflow
简单，运用在不介意被裁剪掉或者下拉的地方
4. 父类添加一个伪类：after（推荐）
写法稍微复杂一点，但是没有副作用，属于是在原有的代码基础上添加新东西，不破坏原始代码，推荐使用！