JavaWeb CSS 基础知识

最新推荐文章于 2022-02-08 20:22:18 发布
最新推荐文章于 2022-02-08 20:22:18 发布
阅读量278 收藏 7
点赞数 3
分类专栏： JavaWeb 文章标签： JavaWeb CSS基础知识 CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/young_1004/article/details/102997307
版权

1、概念：Cascading Style Sheets 层叠样式表

    *层叠：多个样式可以作用在同一个html元素上，同样生效

 

2、好处：

    1.功能强大

    2.将内容展示与样式控制分离（降低耦合度）

 

3、CSS使用

    1.内联样式

    在标签内使用style属性指定css代码

<div style="color: red;">hello css</div>

    

     2.内部样式

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>方式2</title>

        <style>

            div{

                color: blue;

            }

        </style>

    </head>

    <body>

        <div>hello css</div>

    </body>

</html>

 

    3.外部样式

    定义css资源文件，在head标签内定义link标签，引入外部的资源

    css文件

div{

    color: green;

}

    

    html页面

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>方式3</title>

        <link rel="stylesheet" href="../css/a.css"/>

    </head>

    <body>

        <div>hello css</div>

        <div>hello css</div>

    </body>

</html>

    

注意：1.2.3中方式应用范围越来越大

 

4、CSS语法

    格式：   

 选择器{

         属性名1:属性值1;

         属性名2:属性名2;

    }

 

    选择器：筛选具有相似特征的元素

    每一对属性需要使用；隔开，最后一对可以不加

 

5、选择器

    分类

    *基本选择器

        1. id 选择器（选择器具有id属性值的元素）

            语法：#id属性值{}

 

        2. 元素选择器（选择具有相同标签名称的元素）

            语法：标签名称{}

            注意：id选择器优先级高于元素选择器

 

        3. 类选择器

            语法：.class属性值{}

            注意：类选择器优先级高于元素选择器，低于id选择器

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>基础选择器</title>

        <style>

            #div1{

                color: #0000FF;

            }

            .class1{

                color: #008000;

            }

        </style>

    </head>

    <body>

        <div id="div1"> 好好学习</div>

        <div>天天向上</div>

        <p class="class1">天天学JAVA</p>

    </body>

</html>

    *扩展选择器

        1.选择所有元素

语法：*{}

            

        2.并集选择器

      

语法：选择器1，选择器2 {}

 

        3.子选择器（筛选选择器1下的选择器2）           

语法：选择器1 选择器2 {}

        4 .父选择器（选择器1是选择器2的父选择器）

语法：选择器1 >  选择器2 {}

 

        5.属性选择器（选择元素名称，属性名=属性值的元素）

        

语法：元素名称 [属性名称=“属性值”]{}

        

        6. 伪类选择器

语法：标签名：状态{}

 

 

6、属性

    1.字体、文本       

*font-size：字体大小

*color：文体颜色

*text-align：对齐方式

*line-height：高度

 

    2.背景

     

*background

 

    3.边框

       

*border :设置边框，符合属性

 

    4.尺寸

        *width：宽度

        *height：高度

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>字体属性</title>

        <style>

            p{

                font: 30px;

                color: #0000FF;

                line-height: 100px;

                text-align: center;

                border: 1px solid black;

            }

        </style>

    </head>

    <body>

        <p>JAVA天下第一</p>

    </body>

</html>

  

  5.盒子模型

        *margin：外边距

        *padding：内边距 

            *box-sizing:border-box :设置盒子的属性让weight 和 height就是最终大小

        *float：浮动

            *left

            *right 

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>内外边距</title>

        <style>

            div{

                border: blue solid 1px;

            }

            .div1{

                width: 200px;

                height: 200px;

            }

            .div2{

                width: 100px;

                height: 100px;

                margin: 50px;

            }

        </style>

    </head>

    <body>

        <div class="div1">

            <div class="div2"></div>

        </div>

    </body>

</html>

 

开发小牛进阶
关注
  • 3
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb——css基础知识与它的三种使用方法和三种选择器
01-08
什么是css css，全称Cascading Style Sheets，中文名：层叠样式表。它是一种用来表现（表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等）HTML或XML等文件样式的计算机语言，是用于增强控制网...
JavaWeb基础知识集合.xmind
08-19
老师总结的javaweb知识点，想要学习的可以下载看下，感觉不错，与大家分享一下
javaweb css基础知识
RacardoMlu的博客
06-28 116
css基础知识 css其实是一种层叠样式表，我们在web中会使用在html页面嵌入css样式的方法来进行网页的布局。 首先我们需要将css与html进行关联，具体的代码如下： <head> <link rel="stylesheet" type="text/css" href="path"/> </head> css选择器 1、id选择器： #name{...} name具有唯一性，只能使用一次 2、class选择器： ....
(2)javaweb css 基础知识
bai大伯伯的博客
03-28 148
1.什么是CSS    CSS全称为Cascading Style Sheets，译为层叠样式表。    样式定义如何显示HTML元素。    样式通常存储在样式表中。2.使用方式    2.1. 第一种使用方式利用标签中style属性来改变每个标签的显示样式。&lt;p style="background-color:#FF0000; color:#FFFFFF"&gt; p标签...
JavaWeb基础知识
qq_45300162的博客
09-13 327
一、基本概念 1.1、web开发的相关知识 web，在英语中web即表示网页的意思，它用于表示Internet主机上供外界访问的资源。 Internet上供外界访问的Web资源分为： 静态Web资源：指web页面中供人们浏览的数据始终是不变的 动态Web资源：值web页面中供人们浏览的数据是由程序产生的，不同时间点访问web页面看到的内容各不相同 常用静态web资源开发技术：HTML 常用动...
JAVAWEB基础知识——CSS篇
weixin_42433978的博客
02-08 680
1.什么是CSS？ 2.CSS的优势 3.CSS基本语法结构 4.HTML引入CSS样式的三种方法 4-1行内样式 直接在标签内使用style属性引入CSS样式 案例：<h1 style="color: green;">aaa</h1> 4-2内部样式 在<head>...</head>标签中引入<style type="text/css">...</style> 案例： <style type=...
JavaWeb开发实例大全基础卷
07-22
资源名称：Java Web开发实例大全 基础卷内容简介：《Java Web开发实例大全（基础卷）》筛选、汇集了Java Web开发从基础知识到高级应用各个层面约600个实例及源代码，每个实例按实例说明、关键技术、设计过程、详尽...
JavaWeb每日总结思维导图
05-22
内容包括：MySQL、MySQL约束&多表、MySQL多表&事务、JDBC、数据库连接池、HTML、CSS、JS基础&高级、BootStrap、XML、Tomcat、Servlet&HTTP&Request、Response、Cookie&Session、JSP&EL&JSTL、Filter&Listener、...
IDEA版JavaWeb从入门到精通之HTML、CSS第1天
06-19
课程涵盖：Servlet程序、Filter过滤器、Listener监听器、JSP页面、EL表达式、JSTL标签库、jQuery框架、Cookie技术、Session会话、JSON使用、Ajax请求等全部Web开发核心技术点，并在讲解知识点过程中带领大家完成一个...
JavaWeb 并发编程 与 高并发解决方案
热门推荐
young_1004的博客
09-12 2万+
在这里写写我学习到和自己所理解的 Java高并发编程和高并发解决方案。现在在各大互联网公司中，随着日益增长的互联网服务需求，高并发处理已经是一个非常常见的问题，在这篇文章里面我们重点讨论两个方面的问题，一是并发编程，二是高并发解决方案。   文章中的代码实现详见   项目 GitHub 地址：https://github.com/YueMa233/concurrency.git   首...
JavaWeb Json 一种简单的数据格式
young_1004的博客
08-22 1394
 1.Json的格式 json 是一种与语言无关数据交换的格式，作用：使用ajax进行前后台数据交换，移动端与服务端的数据交换。 json是JS的原生内容，也就意味着JS可以直接取出json对象中的数据。 2.Json规则        1）映射用冒号（“：”）表示。名称:值        2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2        3） 映射的集...
JavaWeb JS原生Ajax技术
young_1004的博客
08-22 1057
一、Ajax概述 Jquery的Ajax技术：https://blog.csdn.net/young_1004/article/details/81979009 1.什么是同步，什么是异步 同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态。 异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都随时可以随意做其他的事情，不会被卡死。   ...
JavaWeb 动态页面技术之 jsp
young_1004的博客
08-05 918
JSP技术 1.jsp脚本和注释     jsp脚本：         1）&lt;%java代码%&gt;——&gt;内部的 java 代码翻译到 service 方法内部。         2）&lt;%=java变量或表达式&gt;——&gt;会被翻译成 service 方法内部 out.print()。         3)  &lt;%! java代码%&gt;——&gt;...
JavaWeb （Http 协议（请求 响应）& Tomcat 服务器）
young_1004的博客
06-23 917
一、Http 协议 1、什么是 Http 协议 Http ，超文本传输协议（Hyper Text Transfer Protocal）是互联网上应用最为广泛的一种网络协议。所有的 WWW 文件都必须遵守这个标准。设计 Http 最初的目的是为了提供一种发布和接收 HTML 页面的方法。 2、Http 协议的组成 Http 协议由 Http 请求和 Http 响应组成，当在浏览器输入网址...
JavaWeb 开发之 （XML 文件操作 & 反射）
young_1004的博客
06-20 863
目标： 1、可以编写 XML 存放任意内容 2、通过 DTD 约束编写指定格式的 XML 3、通过 Schema 约束 编写指定的 XML 4、可以使用 DOM4J解析 XML  5、会使用反射对类、方法、构造进行相应操作   什么是 XML ？ XML 全称 Extensible Markup Language ，意思是可扩展的标记语言。XML 语法上和 HTML 比较相似，但是...
JavaWeb Jquery 的 Ajax 技术
young_1004的博客
08-23 710
原生JS的Ajax技术：https://blog.csdn.net/young_1004/article/details/81941458 Jquery 是一个优秀的 js 框架，自然对原生 ajax 进行了封装，封装后的ajax的操作方法更为的简洁，功能更加强大，与ajax操作相关的 jquery 方法有如下几种，但在开发过程中经常使用的有三种 1.$.ajax([options]) 2....
JavaWeb 浅谈 JavaEE 的开发模式
young_1004的博客
08-11 506
1.什么是模式     模式是在开发过程中总结出的”套路“，总结出一套约定俗称的设计模式。 JavaEE 经历过的模式 ：     model1模式 ：         技术组成 ： jsp + javaBean          弊端 ： 随着业务的复杂性，jsp  页面比较混乱。     model2模式 :         技术组成 ：jsp + servlet + javaB...
JavaWeb 核心技术之 过滤器Filter
young_1004的博客
10-05 460
一、过滤器Filter 项目地址：https://github.com/YueMa233/JavaWeb_02 1.filter的简介 filter是对客户端访问资源的过滤，符合条件放行，不符合条件不放行，并且可以对目标资源访问前后进行逻辑处理   2.快速入门 步骤： 1）编写一个过滤器类实现Filter接口 package com.ma.web.filter; impo...
javaweb基础知识
最新发布
06-02
JavaWeb 的基础知识包括： 1. Servlet：JavaWeb 的核心技术之一，用于处理 HTTP 请求和响应，可以通过继承 HttpServlet 类来编写 Servlet。 2. JSP：JavaServer Pages 的缩写，是一种动态网页技术，可以将 Java ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值