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


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

目录
相关文章
|
16天前
|
前端开发 JavaScript 开发工具
【HTML/CSS】入门导学篇
【HTML/CSS】入门导学篇
23 0
|
2月前
|
Web App开发 JSON 前端开发
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
53 0
|
3月前
|
JSON 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(上)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
56 0
|
11天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
19 1
|
11天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
65 1
|
2月前
|
前端开发 JavaScript API
|
3月前
|
前端开发 搜索推荐 开发者
CSS 选择器全攻略:从入门到精通(下)
CSS 选择器全攻略:从入门到精通(下)
|
3月前
|
缓存 前端开发 JavaScript
CSS 选择器全攻略:从入门到精通(上)
CSS 选择器全攻略:从入门到精通(上)
CSS 选择器全攻略:从入门到精通(上)
|
3月前
|
Web App开发 前端开发 JavaScript
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)(下)
Webpack【搭建Webpack环境、Webpack增加配置文件、Webpack中使用Loader、Webpack分离CSS文件 】(一)-全面详解(学习总结---从入门到深化)
26 0