CSS_学习java需要(笔记)_sout("w.");的博客-程序员宅基地

CSS

1.基本介绍
2.css和html结合方式
3.css语法
4.选择器
- 4.1 基础选择器
- 4.2 组合选择器
5.常用样式

1.基本介绍

1.概念： Cascading Style Sheets 层叠样式表
	* 层叠：多个样式可以作用在同一个html的元素上，同时生效

2. 好处：
	1. 功能强大
	2. 将内容展示和样式控制分离
		* 降低耦合度。解耦
		* 让分工协作更容易
		* 提高开发效率

2.css和html结合方式

	1. 内联样式
		 * 在标签内使用style属性指定css代码
		 * 如：<div style="color:red;">hello css</div>
	2. 内部样式
		* 在head标签内，定义style标签，style标签的标签体内容就是css代码
		* 如：
			<style>
		        div{
		            color:blue;
		        }
		
		    </style>
			<div>hello css</div>
	3. 外部样式
		1. 定义css资源文件。
		2. 在head标签内，定义link标签，引入外部的资源文件
		* 如：
    		* a.css文件：
				div{
				    color:green;
				}
			<link rel="stylesheet" href="css/a.css">
			<div>hello css</div>
			<div>hello css</div>

	* 注意：
		* 1,2,3种方式 css作用范围越来越大
		* 1方式不常用，后期常用2,3
		* 3种格式可以写为：
			<style>
		        @import "css/a.css";
		    </style>

3.css语法

* 格式：
		选择器 {
			属性名1:属性值1;
			属性名2:属性值2;
			...
		}
	* 选择器:筛选具有相似特征的元素
	* 注意：
		* 每一对属性需要使用；隔开，最后一对属性可以不加；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结合方式3</title>
    <link rel="stylesheet" href="css/a.css">
</head>
<body>
    <div>hello css</div>
    <p>呵呵</p>
</body>
</html>

4.选择器

4.1 基础选择器

			1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
		        * 语法：#id属性值{}
		    2. 元素选择器：选择具有相同标签名称的元素
		        * 语法： 标签名称{}
		        * 注意：id选择器优先级高于元素选择器
		    3. 类选择器：选择具有相同的class属性值的元素。
		        * 语法：.class属性值{}
		        * 注意：类选择器选择器优先级高于元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        /*id选择器*/
        #div1{
      
            color:red;
        }
        /*元素选择器*/
        div{
      
            color: blue;
        }
        /*类选择器*/
        .cls1{
      
            color: green;
        }
    </style>
</head>
<body>
    <div id="div1">传智播客</div>
    <div>黑马程序员</div>
    <p class="cls1">黑马学院</p>
</body>
</html>

4.2 组合选择器

组合选择器格式：
	选择器1，选择器2，选择器n{
		属性:属性值
	}
	组合选择器可以让多个选择器共用一个css代码样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        .class01,#id01{
      
            color:blue;
            font-size:30px;
            border:2px;
        }
    </style>
</head>
<body>
    <div class="class01">div标签</div><br>
    <div id="id01">div标签</div><br>
</body>
</html>

5.常用样式

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css常用样式</title>
    <style>
        div{
      
            /*颜色*/
            color:red;
            /*边框*/
            border: 1px yellow solid;
            /*宽度*/
            width: 300px;
            /*高度*/
            height: 300px;
            /*背景颜色*/
            background-color: green;
            /*字体大小*/
            font-size: 30px;
            /*div居中*/
            margin-left: auto;
            margin-right: auto;
            /*文本居中*/
            text-align: center;
        }
        a{
      
            /*超链接去下划线*/
            text-decoration: none;
        }
        table{
      
            border: 1px solid black;/*设置边框*/
            border-collapse: collapse;/*边框合并*/
        }
        td{
      
            border: 1px solid red;
        }
        /*列表去除修饰*/
        ul{
      
            list-style: none;
        }
    </style>
</head>
<body>
    <div>我是div标签</div>
    <a href="https:/www.baidu.com">百度</a>
    <table>
        <tr>
            <td>
                呵呵
            </td>
            <td>
                嘿嘿
            </td>
        </tr>
    </table>
    <ul>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
        <li>1111111</li>
    </ul>
</body>
</html>

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

本文链接：https://blog.csdn.net/weixin_50281545/article/details/120774707

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

win 10 Neo4j安装及配置 neo4j-community-4.3.6-windows_windows10安装neo4j_Ting廷帅的博客-程序员宅基地

一、官网下载Neo4j首先在Neo4j官网下载Neo4j社区版如果电脑没有JDK，要先安装JDK，在弹出的页面点击OpenJDK 8 or Oracle Java 8点击jdk.java.net/17点击java SE 11,java版本过新会导致后面Neo4j无法打开点击Windows/x64 Java Development Kit (sha256)JDK下载完成后解压到合适的路径，以下是我的安装路径：D:\Software\Neo4j\jdk-11Neo4j下载完成后解压到合_windows10安装neo4j

C++test 9.2 无法安装重装_无法安装c++ test_明子1的博客-程序员宅基地

在安过程中发的该安装报错文件 C:\Users\maym\AppData\Local\Xtest\C++test\InstallLog大家根据该报错文件提示 “VS2010 extensions directory: C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\Extensions\”找到_无法安装c++ test

阿里巴巴Java开发手册认证考试题库_威威超酷的博客-程序员宅基地

注转载自：https://baijiahao.baidu.com/s?id=1688631517911751367&wfr=spider&for=pc此文作用于自己刷题使用，答案在每道题的题干后面的括号中，选中即可显示。题目1-101.【多选】如何处理单元测试产生的数据，下列哪些说法是正确的？（ABC）A .测试数据入库时加特殊前缀标识。B .测试数据使用独立的测试库。C .自动回滚单元测试产生的脏数据。D .无须区别，统一在业务代码中进行判断和识别。简单解析：P29【推

解决 Windows 10 中的网络连接问题_网络适配器驱动程序 windows 10_MentoGDUT的博客-程序员宅基地

如果在连接到某个网络时遇到问题并且无法连接到 Internet，可以在 Windows 10 中尝试执行以下操作。MentoGDUT作者提醒: 网络重置会删除所有适配器和NDIS设备, 并且重置之后均需要重启, 注销当前用户不能取代系统重启。另外，如果PPPoE拨号提示720错误，则可能是协议出错了(包括但不限于协议缺少、损坏或者安装顺序不正常)，请检查ms_pppoe, ms_ndiswan, ms_wanarp协议以及ms_pppoeminiport, ms_ndiswanip设备是否工作正常, 协议可_网络适配器驱动程序 windows 10

tomcat 嵌入式启动原理_fixcontextlistener_o_瓜田李下_o的博客-程序员宅基地

tomcat 嵌入式启动原理 _fixcontextlistener

小狼毫/中州韵输入法配置记录_weasel 输入法调试_dztdeng的博客-程序员宅基地

版本:小狼毫: 0.11.1win OS version: 1709, build 16299.371小狼毫下载: https://codeload.github.com/rime/weasel/zip/0.11.11. 设置水平候选词在 windows 窗口管理其上输入 %appdata%/Rime打开文件weasel.custom.yaml, 如果没有就创建, 加入如下内容.customiza..._weasel 输入法调试

随便推点

收藏表数据库设计_收藏功能数据库设计_will的猜想的博客-程序员宅基地

产品收藏功能，应该如何设计数据表有产品表产品ID，产品名称有用户表现用户可以收藏产品，应该怎么设计数据表1.是在用户表里增加收藏列，以类似(产品ID)这样的方法存储？2.还是增加收藏表，以每个用户的每个收藏都当作一条数据？单独建立收藏表，基本没有在用户表中增加收藏列这种类似做法的。其次，每个用户的一次收藏作为_收藏功能数据库设计

vulhub漏洞复现69_Tiki Wiki_fichvub5679_Revenge_scan的博客-程序员宅基地

vulhub漏洞复现练习篇_fichvub5679

操作系统原理实验四处理机调度_现系统中有五个进程,进程1取3000,进程2取3000,进程3存1000,进程4取2000,进程5_bearcat303295的博客-程序员宅基地

实验四处理机调度1、实验目的多道程序设计中，往往有若干个进程同时处于就绪状态。当就绪进程个数大于处理器数时，就必须依照某种策略来决定哪些进程优先占用处理器。本实验模拟在单处理器情况下的处理器调度，帮助学生加深理解处理机调度算法。2、实验预备内容（1）C语言源程序的调试和编译知识。（2）掌握优先数调度算法和时间片轮转法的原理。3、实验内容（1）设计一个按优先数调度算法实现处理器调度的程序。[提示]：①假定系统有五个进程，每一个进程用一个进程控制块PCB来代表，进程控制块的格式为：其中，_现系统中有五个进程,进程1取3000,进程2取3000,进程3存1000,进程4取2000,进程5