java web笔记4：基本css

最新推荐文章于 2024-09-19 17:42:53 发布

慕慕和小绵羊

最新推荐文章于 2024-09-19 17:42:53 发布

阅读量292

点赞数 1

分类专栏： java web 文章标签： css 前端 java

本文链接：https://blog.csdn.net/qq_46617150/article/details/122553829

版权

java web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.css基本选择器
常用选择器：

1.标签选择器
根据html标签名称选择标签      标签名称{ }    div{color：red；}
2.ID选择器
根据id属性选择标签             #id值{ }     #dl{color：blue；}
3.类选择器
根据class属性值（类名）        .类名{ }     .cl{color：yellow；}
4.通用选择器
选取所有标签                   *{ }        *{color：pink}

优先级：

1.id选择器>类选择器>标签选择器>通用选择器
2.如果优先级相同，那么就满足就近原则

二.组合选择器

多个选择器的组合，可以更灵活的选取标签

层级选择器：div a{ }
属性选择器： input[type='text']{}
并集选择器： .c1,span{}

1.层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
    <style type="text/css" rel="stylesheet">
        #d1 .c1{
            color: red;
        }

    </style>
</head>
<body>
<!--
在现有界面基础上，设置第一个你好世界的颜色为红色
-->

<div id="d1">

    <div class="c1">hello world!</div>
    <div>hello world</div>
</div>
<div id="d2">

    <div class="c2">hello world!</div>
    <div>hello world</div>
</div>
</body>
</html>

运行结果
在这里插入图片描述
2.属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style type="text/css" rel="stylesheet">
        input[type="password"]{
            background-color: grey;
        }

    </style>
</head>
<body>
<!--
需求：设置背景色为灰色
-->
<input type="text"><br>
<input type="password"><br>
<input type="data"><br>
<input type="password">
</body>
</html>

运行结果
在这里插入图片描述
3.并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>并集选择器</title>
    <style type="text/css" rel="stylesheet">
        .c1,span{
            color:red;
        }
        </style>
</head>
<body>
<!--需求：设置类名c1的标签及span的颜色为红色-->
<div class="cl">hello world</div>
<div>hello world</div>
<span>hello world</span>
<span>hello world</span>
<span>hello world</span>

</body>
</html>

运行结果
在这里插入图片描述

三.css常用属性

1.背景属性

功能        属性名               属性取值
背景色     background-color      1.颜色常量:red  2.使用十六进制：#ABC  3.红绿蓝（rpg）
背景图片   background-image      url（图片的路径）
平铺方式   background-repeat     1.repeat默认，背景图片在垂直方向和水平方向重复
					            2.repeat-x，水平方向重复
								3.repeat-y，垂直方向重复
								4.no-repeat，背景图仅显示一次，不重复
背景位置	  background-position   left top

2.文本样式

功能             属性名                属性取值
颜色             color  				 颜色
设置行高   	 line-height 				 像素
文字修饰 	 text-decoration   	 1.underline下划线 
								 2.overline 上划线
 								 3.ine-through删除线
								 4.none 不要线条
文本缩进		 text-indent         em
文本对齐 	 text-align 		 left，right，center，默认值:由浏览器决定的

3.字体属性

功能 		 属性名  		作用
 字体名     font-family   设置字体
 字体大小   font-size        像素
 设置样式   font-style     1.italic斜体
						  2.normal 默认值，浏览器选择一个标准的字体样式
 设置粗细   font-weight    bolder 加粗

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>字体样式</title>
   <style type="text/css" rel="stylesheet">
       span{
           color: red;
           font-size: 80px;
           font-family: 楷体;
           font-style: italic;
           font-weight: bolder;

       }
   </style>
</head>
<body>
<span>hello world!</span>
</body>
</html>