Javaweb基础入门（四）之css

最新推荐文章于 2024-07-11 23:52:48 发布
最新推荐文章于 2024-07-11 23:52:48 发布
阅读量659 收藏 1
点赞数
分类专栏： Javaweb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xueer_z/article/details/81981405
版权

css初步

  • css的优势

    1.内容与表现分离
    2.网页的表现统一，容易修改
    3.丰富的样式，使得页面布局更加灵活
    4.减少网页的代码量，增加网页的浏览速度，节省网络带宽
    5.运用独立于页面的CSS，有利于网页被搜索引擎收录

  • css基本语法

    a.选择器{声明1；声明2；} 提示：最后一条声明可以不写分号，基于美观，推荐写上 b.style标签
    这里写图片描述

  • css基本选择器

    标签选择器
    这里写图片描述
    类选择器
    这里写图片描述
    ID选择器
    这里写图片描述

    提示：标签选择器直接应用于HTML标签 类选择器可在页面中多次使用 ID选择器在同一个页面中只能使用一次
    优先级：ID选择器>类选择器>标签选择器

  • css样式的引入
    a.行内样式：
    这里写图片描述
    b.内部样式表（写在<head>的<style>标签中）
    优点：方便在同一页面中修改样式
    缺点:代码的复用性低

    c.外部样式表（保存在后缀名.css的样式表中）
    链接式：
    这里写图片描述
    导入式：
    这里写图片描述
    优先级：行内样式>内部样式表>外部样式表

  • css复合选择器

    后代选择器

    在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明 外层的标签写在前面，内层的标签写在后面，之间用空格分隔
    标签嵌套时，内层的标签成为外层标签的后代
    这里写图片描述

    交集选择器

    由两个选择器直接连接构成，选中二者各自元素范围的交集 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器
    选择器之间不能有空格，必须连续书写
    这里写图片描述

    并集选择器

    多个选择器通过逗号连接而成 利用并集选择器同时声明风格相同样式
    这里写图片描述

css常用属性

文本属性：

属性名称解释及其用法
color设置文本颜色 color:red
line-height设置行高（即行间距）
text-align设置对齐方式，取值为left,right,center
letter-spacing设置字符间距
text-decoration设置文本修饰，取值为underline,none,overline^
white-space规定如何处理空白，如规定是否换行，常用取值为不换行

字体属性：

属性名称解释及其用法
font在一个申明中设置字体的所有样式属性
font-family定义字体类型
font-size定义字体大小
font-weight定义字体的粗细
font-style设置字体风格

背景属性：

属性名称解释及其用法
background简写属性，作用是将背景的多个分量属性设置在一个申明中
background-color设置元素的背景颜色
background-image将图像设置为背景
background-repeat设置背景的平铺方式
background-position设置背景出现的初始位置

列表属性：

属性名称解释及其用法
list-style简写属性，把所有列表的属性设置于一个申明中
list-style-image将图像设置为列表标志的位置
list-style-position设置列表中列表项的位置
list-style-type这是列表项标志的类型

外边距属性：

属性名称解释及其用法
margin-top上外边框
margin-right右外边框
margin-bottom下外边框
margin-left左外边框
margin四个方向的外边距各不相同时，在一个申明中统一设置四个方向的外边距设置顺序为：上，右,下，左

边框属性：

属性名称解释及其用法
border-color边框颜色
border-width边框宽度
border-stylenone:默认值，无边框；solid:实线；dashed:虚线
border-top上边框
border-right右边框
border-bottom下边框
border-left左边框
border在一个申明中统一设置4个方向的边框属性

内边距属性：

属性名称解释及其用法
padding-top内容与上边距之间的距离
padding-right内容与右边距之间的距离
padding-bottom内容与下边框之间的距离
padding-left内容与左边距之间的距离
padding四个方向的内边距各不相同时，在一个申明中统一设置四个方向的外边距设置顺序为：上，右,下，左

display属性：

属性名称解释及其用法
“display:取值有三个：block,inline,none“block:将元素显示为块级元素，该元素前后会带有换行符 ；inline:默认，元素会显示为内联元素，该元素前后没有换行符 ；none:该元素不会被显示

overflow属性：

属性名称解释及其用法
visible默认值，内容不会被修剪，呈现在盒子之外
hidden内容会被修剪，并且其余内容是不可见的
scroll内容会被修剪，但是流浪器会显示滚动条以便查看其余内容
auto如果内容被修剪，则流浪器会显示滚动条以便查看其余的内容
Redamancy_609
关注
专栏目录
Java web前端——CSS使用基础
冷漠的小猿
09-02 1万+
CSS简介 1.1 CSS概念 CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的,...
CSS入门概述
yangyingjian123的博客
01-13 125
CSS： 给网页穿上美丽的外衣 什么是CSS 层叠样式表（Cascading Style Sheet） CSS优势 1、内容与表现分离 2、网页的表现统一,容易修改 3、丰富的样式，使页面布局更加灵活 4、减少网页的代码量，增加网页的浏览速度，节省网络带 5、运用独立于页面的CSS,有利于网页被搜索引擎收录 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号
【JavaWeb】CSS_css的语法和三种使用方式
午后红茶
01-12 2051
1.css全称：cacading style sheet（层叠样式表） 2.作用：对html标签进行操作（标签中文本内容进行设置），美化页面 CSS的三种使用方式 1.行内样式： （1）在每个html标签里都会有 style 属性，例如：超链接 （2）格式：超链接 （3）使用这种方式的弊端：①标签和样式混合在一起，不利于维护          ②书写过程麻烦，且不
第4章 知识点
华少的博客
06-18 217
CSS的优势:内容与表现分离网页的表现统一，容易修改丰富的样式，使得页面布局更加灵活减少网页的代码量，增加网页的浏览速度，节省网络带宽运用独立于页面的CSS，有利于网页被搜索引擎收录HTML中引入CSS样式:行内样式:使用style属性引入CSS样式内部样式表:CSS代码写在&lt;head&gt;的&lt;style&gt;标签中外部样式表:CSS代码保存在扩展名为.css的样式表中:HTML文...
CSS
weixin_30559481的博客
05-28 53
一.CSS的优势：1.内容与表现分离；2.网页的表现统一，容易修改；3.丰富的式样，使得页面布局更加灵活；4.减少网页的代码量，增加网页的浏览速度，节省网络带宽；5.运用独立页面的CSS，有利于被搜索引擎收录；二.CSS基本语法结构1.语法：h1{ font-size：16px; 属性：值； }2.style标签：...
javaweb基础知识入门
最新发布
qq_65371543的博客
07-11 1214
Http(超文本传输协议)是一个简单的请求-响应协议，它通常运行在TCP之上文本： html，字符串，~...超文本：图片，音乐，视频，定位，地图......https：443 安全的Java Server Pages: java服务端页面，也和Servelt异样，用于动态Web技术！最大的特点：写JSP就像在写HTML区别：HTML只给用户提供静态的数据JSP页面中可以嵌入JAVA代码，为用户提供动态数据。
javaweb入门3之css
学习笔记，相关教程 分享
03-04 613
小白都能学懂的css入门教程
零基础入门JavaWeb——CSS相关知识
星霖的博客
11-30 346
前端技术知识
JavaWeb快速入门--CSS
龙源IT 的博客
04-20 980
Cascading Style Sheets 层叠样式表 CSS是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
IDEA版JavaWeb从入门到精通之HTML、CSS第1天
06-19
课程涵盖：Servlet程序、Filter过滤器、Listener监听器、JSP页面、EL表达式、JSTL标签库、jQuery框架、...课程目标：为Web开发奠定扎实基础，并为后续框架学习做好技术储备。 本教程共计16天，本章节为第1天HTML&CSS
javaweb之web入门基础
09-05
### JavaWeb之Web入门基础知识详解 #### 一、JavaWeb概述 JavaWeb是基于Java语言进行Web应用程序开发的一套技术和框架。它包含了多种技术和服务，主要用于构建动态网站、Web应用程序等。JavaWeb的基础主要包括静态...
JavaWeb入门：HTML、CSS与MySQL基础教程
"Java0基础_day16_Javaweb前端_HTML_CSS_mysql（csdn）————程序.pdf" HTML，全称为超文本标记语言（HyperText Markup Language），是用于创建网页的标准标记语言。它由一系列预定义的标签组成，这些标签描述了...
JavaWeb入门
Massimo__JAVA的博客
04-29 1072
一、基本概念 web开发： web意为网页，javaweb则是用java来开发网页； 静态web：例如html，css…，提供给所有人看的数据始终不会发生变化 动态web：例如淘宝，京东…，几乎所有的网站都是动态web，提供给所有人看的数据会发生变化，每个人在不同的时间，不同的地点，看到的信息各不相同。技术栈：Servlet/JSP , ASP , PHP 在java中，动态web资源开发的技术统称为javaweb 二、web应用程序 概念：可以提供浏览器访问的程序 a.html , b.html…等
JavaWeb基础入门：HTTP协议与Servlet详解
JavaWeb基础是Web开发的重要起点，涵盖了从基本概念到高级应用的关键技术。本教程以《javaweb基础简介》为起点，首先介绍了Web工作的核心原理，即HTTP协议。 HTTP（Hypertext Transfer Protocol）是位于开放系统...
Javaweb基础入门（二十一）之jQuery(筛选、事件、效果、Ajax)
xueer_z的博客
09-10 1056
一、筛选 过滤 名称 解析 eq(index) 正数从头开始，获得指定索引的元素，从0开始，0表示第一个 负数从尾开始，获得指定索引的元素，从1开始，-1表示第一个 first() 第一个 last() 最后一个 hasclass(class) 判断是否有指定的class is() 判断 map() ...
Javaweb基础入门（二十）之 jQuery（简介以及基本语法）
xueer_z的博客
09-08 903
一、简介 1.概念 javascript库，封装了很多预定义的对象和使用函数 2.组成部分 WEB版本 UI版本 集成了UI组件 Mobile版本 针对移动端开发 quit版本 用js测试 3.流行的javascript库 名称 简介 JQuery 最流行 Dojo 很多js单独文件...
Javaweb基础入门（十五）之JSP
xueer_z的博客
09-02 845
1.JSP概述 JSP 全称是 Java Server Pages,它和Servlet技术一样 都是Sun公司推出的用于开发动态web项目的技术.Jsp 适合编写输出动态内容 但不适合编写java逻辑 2.JSP原理 当浏览器访问一个web服务器上的jsp页面时 在服务器端 会将jsp页面进行翻译 –&gt;.java文件 编译成 —&gt;.class文件 执行 以jsp...
Javaweb基础入门（十四）之过滤器Filter及监听器Listener
xueer_z的博客
08-31 830
过滤器Filter 1.概念 Filter也称之为过滤器，它是Servlet技术中最激动人心的技术，WEB开发人员通过Filter技术，对web服务器管理的所有web资源：例如Jsp,Servlet, 静态图片文件或静态 html文件等进行拦截，从而实现一些特殊的功能。例如实现URL级别的权限访问控制、过滤敏感词汇、压缩响应信息等一些高级功能。 2. 如何编写过滤器 1、...
Javaweb基础入门（九）之XML解析（DOM）
xueer_z的博客
08-26 824
1.DOM思想: 将整个XML加载到内存中 形成一颗(dom)树 将文档的各个组成部分 封装成为一些独立的对象 进行解析 所有对XML的操作都是在对内存中的文档对象进行操作 DOM 是官方的XML解析标准 所以DOM 是所有开发语言都支持的 java javascript 都支持 2.优缺点: 优点:因为在内存中会形成dom树 所以可以对dom树的节...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值