java第二阶段之CSS

最新推荐文章于 2022-08-19 20:26:19 发布

皇正经

最新推荐文章于 2022-08-19 20:26:19 发布

阅读量197

点赞数

文章标签： css java css3

本文链接：https://blog.csdn.net/huangluyang123/article/details/121106173

版权

一、CSS与HTML结合方式

（一）引入方式

1.行内样式

在标签内使用style属性指定css代码。该方式定义样式作用于为整个页面。

<body>     <font style="color: red;">自古逢秋悲寂寥</font> </body>

优缺点: 由于复用性不好，实际在写页面时不提倡使用，在测试的时候可以使用。

2.内联样式

在head标签内，定义style标签，style标签的标签体内容就是css代码。

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        font,span{
            color:red;
            font-size: 25px;
        }
    </style>
</head>

优缺点: 由于样式与结构未全部分离, 如果只控制当前页面的标签样式的话使用内部样式, 复用性不好。

3.外联样式

定义css文件，在head标签中使用link标签，引入外部的资源文件。该方式定义样式可以作用于其他页面。

 <link rel="stylesheet" href="css/demo.css">
 </head>
 <body>
     <font>我自横刀向天笑，去留肝胆照昆仑</font>

优缺点: 重用性较强, 一个css样式文件可以控制多个页面。

优先级问题:

行内样式 > 内部样式 & 外部样式(后加载的先生效)

二、CSS语法格式

无论使用HTML还是CSS都需要遵从一定的规范。

css定义规则如下：

选择器{

属性1:属性值;

属性2:属性值;

属性3:属性值;

...

}

或者：

选择器{属性1:属性值;属性2:属性值;属性3:属性值;... }

其中:

选择器：指css样式作用的HTML对象。

{}：限定范围，指当前花括号内的所有样式都属于当前选择器。

<style>
        div{
            border: 2px solid black;
            width: 300px;
            height: 300px;
            background-color: blue;
            border-radius: 50%;
        }
</style>

注意事项：

选择器严格区分大小写，属性和属性值不区分大小写。

三、CSS选择器

（一）基本选择器

1、标签选择器

HTML标签指HTML的标记名称、如div、html、body、input等。所有符合HTML规范的标记都可以作为标签选择器。

写法格式:

标签名{

样式一;

样式二;

....

}

代码示例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border: 2px solid black;
            width: 300px;
            height: 300px;
            background-color: blue;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div>区域块</div>
</body>
</html>

2、ID选择器

ID选择器CSS中用“#”开头定义，后面跟随ID名称。例如：#name

ID为当前HTML元素的ID属性值。

写法格式:

#id名称{

样式一;

样式二;

....

}

代码示例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #a{
            width: 100px;
            height: 100px;
            background-color: cyan;
        }
    </style>
</head>
<body>
   <div id="a"></div> 
</body>
</html>

3、类选择器

在css中类选择器使用“.”符号开头定义，后面跟随类名。例如：.name

类名即是HTML中class属性的值，大多数HTML元素都可以定义class属性。

写法格式: .类名{

样式一;

样式二;

...

}

代码示例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .a1{
            font-size: 30px;
            color: red;
        }
        .aa1{
            background-color: cyan;
        }
        *{
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
    <div class="a1 aa1">区域1</div>
    <p class="aa1">段落1</p>
    <div class="a1">区域2</div>
</body>
</html>

（二）其他选择器

1、全局选择器

全局选择器又称通用选择器，将匹配任何标签, 使用来表示。

代码示例：

{
             padding: 0px;
             margin: 0px;
         }

2、组合选择器

组合选择器:当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

代码示例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #d1,.c1,p{
            
        }
    </style>
</head>
<body>
    <div id="d1">区域块</div>
    <a href="" class="c1">百度一下</a>
    <p>段落标签</p>
</body>
</html>

3、层级选择器

层级选择器: 层级选择器也称为后代选择器或者包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。

代码示例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ol li{
            color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>
    <ol>
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
</body>
</html>

4、父选择器

父选择器: 又称子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择

代码示例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>li{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <ol>
            <li>有序列表</li>
            <li>有序列表</li>
            <li>有序列表</li>
        </ol>
        <li>子列表</li>
        <li>子列表</li>
        <li>子列表</li>
    </div>
</body>
</html>

5、属性选择器

我们可以通过属性选择器，以属性名或者属性值来匹配对应标常用的属性选择器有: [attr] 该选择器选择包含 attr 属性的所有元素，不论 attr 的为何。

[attr=val] 该选择器仅选择 attr 属性被赋值为 val 的所有元素。

[attr~=val] 该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。

代码示例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li[class]{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <li class="cc c1 c2">测试1</li>
        <li class="cc c1">测试2</li>
        <p class="c3">测试3</p>
    </div>
</body>
</html>

6、伪类选择器

伪类选择器主要有: a:link{} 未被访问时

a:visited{} 访问过后

a:hover{} 鼠标悬浮时

a:active{} 鼠标激活时

代码示例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:hover{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <a href="">百度一下</a>
</body>
</html>

四、CSS常见属性

（一）尺寸修饰

代码示例：

<head>
    <meta charset="UTF-8">
    <title>尺寸样式</title>
    <style>
        img {
            height: 300px;
            width: 500px;
        }
     </style>
</head> <body>
    <img src="./img/liuyan.jpg">
</body>
</html>

演示效果

（二）字体样式

代码示例：

<style>
        p{
            font-size: 30;
            font-family: '微软雅黑';
            font-weight: bold;
            font-style: italic;
            color: red;
            text-align: center;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p>dsfadaggagrewef</p>
    <a href="">百度一下</a>
</body>
</html>

演示效果

（三）文本样式

代码示例：

<!DOCTYPE html>
<html lang="en"> <head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style>
        p {
            / 字体颜色 /
            color: red;
            / 行高 /
            line-height: 30px;
            / 文本的对齐方式 left 默认 right center/
            text-align: center;
            / 字体大小 /
            font-size: 30px;
            / 首行缩进 /
            text-indent: 2em;
            / 文本的修饰 /
            text-decoration: line-through;
            / 指定文本内容的阴影 参数1： 颜色 参数2：水平方
向偏移量  
                参数3：垂直方向上的偏移量 参数4：模糊度/
            text-shadow: yellow 3px 5px 5px;
        }
    </style>
</head> <body>
    <p>红豆生南国</p>
    <p>春来发几枝</p>
    <p>愿君多采撷</p>
    <p>此物最相思</p>
</body>
</html>

演示效果

（四）边框样式

可以简写：

border:1px solid red; 表示四个方向的宽度都是1px，都是实线，都是红色。

代码示例：

<title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border-width:30px;
            border-color: black;
            border-style: solid;
            border-radius: 50%;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

演示效果

（五）背景样式

代码示例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-color: cornflowerblue;
            background-image: url(1.jpg);
            background-repeat: no-repeat;
            background-size: 100%;
           /* background-position: top;*/
           background-attachment: fixed;
        }
        div{
            width: 300px;
            height: 1900px;
            background: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

演示效果

（六）布局样式

HTML有些标签默认从左到右排列，如input。有些则默认从上到下排列，如div。

如果将这些默认从上到下的标签改变排列规则，按照从左到右的顺序排列，就需要用到浮动属性。float是css样式中的定位属性，用于设置标签对象的浮动布局，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动属性的取值有三个：left：元素左浮动 right：元素右浮动

none：默认值，不浮动

元素设置浮动后就会脱离标准文档流，所以会对页面中其他未设置浮动的元素排版产生影响，我们还可以使用clear属性清除浮动。

属性解析:

float:float是css样式中的定位属性，用于设置标签对象的浮动布局，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动属性的取值有三个：

left：元素左浮动

right：元素右浮动

none：默认值，不浮动

代码示例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            float: left;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

如果不希望p标签的文本内容环绕div显示，而是在所有盒子的下方正常显示，此时就会用到清除浮动属性clear，该属性常用的取值有：

left（清除左浮动）、right（清除右浮动）、both（清除两侧浮动）。一般我们会使用一个独立的div标签专门用来做清除浮动的样式。

（七）定位样式

position定位

1.relative 相对定位

相对原来的位置定位,定位完成后可以去偏移(移动),不会脱离标准文档流

2.absolute 绝对定位

绝对定位后，脱离文档流,位置移动看父标签中有没有定位，如果有定位则相对父标签偏移，如果父标签没有定位，相对<body>标签偏移

（八）列表修饰

HTML有丰富的标签，这些标签被定义成不同的类型，一般被分为块标签、行标签和行块标签。

块标签：以区域块方式出现。每个块标签独自占一整行或者多行，且可设置宽高。

常见的块级元素：<div> 、<h> 、<ul>等

行标签：按行排列。

常见的行标签：<span> 、 <strong> 、<a>等

行块标签：按行排列，但又可以设置宽高的标签。

常见的行块标签：<img>、<input>、<textarea>等

在实际开发中，如果希望这些标签之间可以相互转换，需要用到display属性

属性解析:

display:用于定义建立布局时元素生成的显示框类型.

其取值如下:

inline：此元素将显示为行元素（行内元素display的默认值）

block：此元素指定为块元素（块元素display的默认值）

inline-block:将对象呈现为内联元素，对象内的元素块级展示。

none：隐藏元素

列表标签默认是带有项目符号的，如果不需要显示项目符号可以将列表样式中的list-style-type属性设置为none值去除，下面结合display属性和列表样式属性实现一个横向导航的效果。

皇正经

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
java第二阶段之CSS

一、CSS与HTML结合方式（一）引入方式1.行内样式在标签内使用style属性指定css代码。该方式定义样式作用于为整个页面。<body> <font style="color: red;">自古逢秋悲寂寥</font> </body>优缺点: 由于复用性不好，实际在写页面时不提倡使用，在测试的时候可以使用。2.内联样式在head标签内，定义...
复制链接

扫一扫