『黑马程序员济南』JavaEE就业笔记串讲---CSS

最新推荐文章于 2022-09-03 11:37:08 发布
最新推荐文章于 2022-09-03 11:37:08 发布
阅读量97 收藏
点赞数
原文链接：https://my.oschina.net/u/3828683/blog/1802836
版权

『黑马程序员济南』JavaEE就业笔记串讲---CSS

【HTML的块标签】

<div></div> :默认一个div独占一行.

<span></span> :默认在同一行.

【CSS的概述】

Ø 什么是CSS:

* HTML相当于网站的骨架！CSS对骨架进行美化！

Ø CSS在那些地方使用：

任何网站都会使用CSS去美化页面！！！

Ø 如何使用CSS

知道CSS的语法.

【CSS的基本语法】

CSS的基本语法通常包含两个部分：一个是选择器，一个声明.

* 选择器{属性:属性值;属性:属性值...}

【CSS的引入的方式】

Ø 行内样式：直接在HTML的元素上使用style属性设置CSS.

<h1 style="color:red;font-size:200px ;">标题</h1>

Ø 页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.

<style>

h1{

color:blue;

font-size: 40px;

}

</style>

Ø 外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.  

<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />

【CSS的选择器】

Ø 元素选择器：

div{

border:1px solid blue;

width:40px;

height:45px;

}

Ø ID选择器:

#d1{

border:2px solid red;

}

Ø 类选择器：

.divClass{

border:2px solid yellow;

}

【CSS的浮动】

Ø 使用float属性可以完成DIV的浮动.

float属性的取值:

Ø 清除浮动效果：使用clear属性进行清除:

Ø 案例：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

.divClass{

border:1px solid blue;

width:200px;

height:220px;

}



#d1{

float:left;

}

#d2{

float:left;

}

#d3{

float:left;

}

.clear{

clear:both;

}

</style>

</head>

<body>

<div id="d1" class="divClass">DIV1</div>

<div id="d2" class="divClass">DIV2</div>

<div id="d3" class="divClass">DIV3</div>

<div class="clear"></div>

<div id="d4" class="divClass">DIV4</div>

</body>

</html>

【CSS的其他选择器】

Ø 属性选择器：

<style>

input[type="text"]{

background-color: red;

}

</style>

Ø 后代选择器:

div span 查找的是所有div中的所有的span元素.

h1 strong{

   color:red;

}

<h1>

This is <strong>very</strong> <strong>very</strong> important.

</h1>



<h1>This is

<strong>very</strong>

<em>really

<strong>very</strong>

</em>

important.

</h1>

Ø 子元素选择器：

<div > span找这个div中的第一层级的span元素.

<h1 > strong{

   color:red;

}

<h1>

This is <strong>very</strong> <strong>very</strong> important.

</h1>



<h1>This is

<strong>very</strong>

<em>really

<strong>very</strong>

</em>

important.

</h1>

Ø 并列选择器:

选择器,选择器{

}

【CSS中的定位】

position属性设置定位：

* relative:相对定位

* absolute:绝对定位

使用另外两个属性:left,top

转载于:https://my.oschina.net/u/3828683/blog/1802836

chilianshen5608
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2019-1-3 黑马程序员JavaEE学习笔记
weixin_44373756的博客
01-04 1349
2019-1-3 黑马程序员JavaEE学习笔记 一.HTML:Hyper Text Markup Language 1.超文本：能实现普通文本不能实现的功能 标记：标签 2.:页面属性，浏览器解析标签，外部文件标签 3.大部分标签有属性：属性=“属性值” 4.空标签简写例如：&amp;lt;br/&amp;gt; 5.HTML基本标签： 1.文件标签（结构标签） &amp;lt;html&amp;gt;:root mar...
黑马程序员最新版JavaWeb基础教程-学习笔记
qq_33898609的博客
05-08 5746
da@黑马程序员最新版JavaWeb基础教程-学习笔记 day06-HTML&CSS HTML HTML（HyperTest Markup Language）:超文本标记语言 是一门语言，所有的网页都是用html这门语言编写出来的
JavaEE(SSM框架，黑马程序员) P193~P201 完结
Scxioi0的博客
03-20 3322
一、SSM框架整合 1.1 原始方式整合 1.准备工作 2.创建Maven工程 3.导入Maven坐标 <!--spring相关--> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> &lt
JavaEE第一课--工程创建
W__J__J的博客
09-03 2279
JavaEE工程的创建，详细解析
JavaEE--------Spring
热门推荐
詹煜彪9527
03-28 1万+
spring尚硅谷
JavaEE源代码 jaxen-1.1-beta-7
07-09
JavaEE源代码 jaxen-1.1-beta-7JavaEE源代码 jaxen-1.1-beta-7JavaEE源代码 jaxen-1.1-beta-7JavaEE源代码 jaxen-1.1-beta-7JavaEE源代码 jaxen-1.1-beta-7JavaEE源代码 jaxen-1.1-beta-7JavaEE源代码 jaxen-1.1-...
JavaEE源代码 jstl-1.2
07-09
JavaEE源代码 jstl-1.2JavaEE源代码 jstl-1.2JavaEE源代码 jstl-1.2JavaEE源代码 jstl-1.2JavaEE源代码 jstl-1.2JavaEE源代码 jstl-1.2JavaEE源代码 jstl-1.2JavaEE源代码 jstl-1.2JavaEE源代码 jstl-1.2JavaEE源...
JavaEE源代码 asm-2.2.2
07-08
JavaEE源代码 asm-2.2.2JavaEE源代码 asm-2.2.2JavaEE源代码 asm-2.2.2JavaEE源代码 asm-2.2.2JavaEE源代码 asm-2.2.2JavaEE源代码 asm-2.2.2JavaEE源代码 asm-2.2.2JavaEE源代码 asm-2.2.2JavaEE源代码 asm-2.2.2...
JavaEE源代码 antlr-2.7.6rc1
07-08
JavaEE源代码 antlr-2.7.6rc1JavaEE源代码 antlr-2.7.6rc1JavaEE源代码 antlr-2.7.6rc1JavaEE源代码 antlr-2.7.6rc1JavaEE源代码 antlr-2.7.6rc1JavaEE源代码 antlr-2.7.6rc1JavaEE源代码 antlr-2.7.6rc1JavaEE源...
JavaEE源代码 cglib-2.2_beta1
07-09
JavaEE源代码 cglib-2.2_beta1JavaEE源代码 cglib-2.2_beta1JavaEE源代码 cglib-2.2_beta1JavaEE源代码 cglib-2.2_beta1JavaEE源代码 cglib-2.2_beta1JavaEE源代码 cglib-2.2_beta1JavaEE源代码 cglib-2.2_beta1...
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
mmexport1722080103662.jpg
07-27
mmexport1722080103662.jpg
matlab 20244a 6
07-27
matlab 20244a 6
pi_heif-0.17.0-cp310-cp310-macosx_12_0_x86_64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
pillow-10.4.0-cp312-cp312-musllinux_1_2_aarch64.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
生产管理体系设计全案.pptx
07-27
生产管理体系设计全案.pptx
软件管理器的开发-代码-AppExplorer-0.4.zip
最新发布
07-27
软件管理器的开发_代码_AppExplorer_0.4.zip
[毕设]一体化学生选课平台设计与实现.zip
07-27
[毕设]一体化学生选课平台设计与实现
cykooz.resizer-3.0.0-cp311-cp311-macosx_10_12_x86_64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值