javaweb入门3之css(一)

简介: javaweb入门3之css一、css简介二、javaweb入门前章内容三、本文用到的单词四、css写入的位置五、css语法5.1.1、 实列:六、css常用的选择器的分类6.1.0 简单选择器6.1.1、名称类型6.1.2、类样式6.1.3id选择器6.1.4、总结代码机器效果:

一、css简介


CSS (层叠样式表层叠样式表(英文全称:Cascading Style Sheets)是 一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标 记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网 页,还可以配合各种脚本语言动态地对网页各元素进行格式化。


CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。


二、javaweb入门前章内容


1.javaweb入门1.html


2.Javaweb入门2之HTML(table 、form)


三、本文用到的单词


link: 链接


font: 字体


background: 背景


type类型


margin: 边缘


padding: 填充


position: 位置


absolute: 绝对的


relative : 相对的


stylesheet: 样式表


四、css写入的位置


在html的 在这里写css代码 中间写代码


e9828e357aca4c4aafb224034bedf767.png


五、css语法


9603fbd53e6f45729dfd4cbf6a5728b5.png


选择器指向您需要设置样式的 HTML 元素。如 h1、p、div等


每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。


多条 CSS 声明用分号分隔,声明块用花括号括起来。


5.1.1、 实列:


3171e923373b404586f846e3c7fd8074.png


六、css常用的选择器的分类


我们可以将 CSS 选择器分为五类:


简单选择器(根据名称、id、类来选取元素)


组合器选择器(根据它们之间的特定关系来选取元素)


伪类选择器(根据特定状态选取元素)


伪元素选择器(选取元素的一部分并设置其样式)


属性选择器(根据属性或属性值来选取元素)


6.1.0 简单选择器


6.1.1、名称类型


p{/*p表示标签 表示所有p标签都遵循大括号的规则*/
        color: red;
}
对应的就是html的所有<p>标签
body{
        margin:0px;
        padding: 0px;
}
对应的就是html的所有<body>标签
对应的还有 <h> <div> 等等


6.1.2、类样式


以点(.)开头 后面跟类名


如我有一个类叫 f20


.f20{
        font-size: 20px;
        color: red;
  }


这种最前有 . 的就是类选择器对应的是所有带有 class=“f20”


87858c29f3ef4126a312fda707812b30.png


6.1.3id选择器


以井号(#)开头,后跟该元素的 id。


c2ef5474fb814570bf3f1040bf0fbb4e.png


4fcc9891fee946f9b67ef477e23ccb99.png


6.1.4、总结代码机器效果:


1.html部分


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style type="text/css">
      /*注释style标签内是CSS环境,可以写css代码。*/
      /*标签样式表*/
      /*
       1.为啥需要CSS
       2.css的分类:标签样式表、类样式表、id样式表
       组合样式表。
       3.位置分类 ,嵌入式(在标签内部以属性的方式存在)、内部(被style包裹)、
       停用外部的css
       */
    </style> 
    <link rel="stylesheet" href="day_css01.css">
    <title></title>
  </head>
  <body>
    <p>这里是红色1</p>
    <p>这里是红色2</p>
    <p class="f20">这里是红色3</p>
    <p id=p4>这里是红色4</p>
    <div>
      <p style="font-size: 60px;"><span>你好</span></p>
      <span style="font-size: 60px;">世界</span>
      <p>!!!!</p>
    </div>
  </body>
</html>


css部分


  p{/*p表示标签 表示所有p标签都遵循大括号的规则*/
        color: red;
  }
      /*有点这是类样式*/
  .f20{
        font-size: 20px;
        color: blue;
  }
      /*#表示id样式*/
  #p4{
        color:deepskyblue;
        background-color: red;
  }
  div p{
        color: #00BFFF;
  }


效果:


8cc9ee65ce444708a8fdbb7817fe5cc6.png


上面的代码你可能会好奇 两个文件是怎么链接起来的接下来就是链接部分

目录
相关文章
|
14天前
|
Web App开发 前端开发
【CSS】——基础入门常见操作
CSS引入,CSS对元素美化,style修饰,选择器(标签选择器,类选择器,ID选择器,复合选择器),font-size , boder ,width,height,margin,paddiing
|
4月前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
270 91
|
4月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
78 28
|
4月前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
67 15
|
4月前
|
前端开发
|
4月前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
4月前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
|
5月前
|
前端开发
CSS3入门
【8月更文挑战第23天】CSS3入门。
39 3
|
5月前
|
前端开发
零基础 CSS 入门问题之CSS 代码的一般格式是什么样的
零基础 CSS 入门问题之CSS 代码的一般格式是什么样的
|
5月前
|
前端开发 开发者
太惊艳了,这些都是CSS的入门知识!
太惊艳了,这些都是CSS的入门知识!

热门文章

最新文章