CSS

CSS简述

  • CSS是什么？有什么作用？

    CSS(Cascading Style Sheets)：层叠样式表。

CSS通常称为CSS样式或层叠样式表。主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽度、边框样式、边距等）以及版式的布局等外观显示样式。

CSS可以使HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更加灵活，更容易绘制出用户需要的结构。

CSS的代码规范

  • 放置规范

    在<style>标签内容体中书写CSS样式代码，<style>标签放置在标签中。
  • 格式规范

    选择器名称 {属性名:属性值; 属性名:属性值;......}

选择器：即指定CSS样式作用在哪些HTML标签上。

  • 代码规范
  • 属性名和属性值之间是键值对关系。
  • 属性名和属性值之间用”:“连接，最后”;“结尾。（例如：font-size:10px）
  • 如果一个属性名有多个值，多个值之间用空格隔开。（例如：border:5px solid red;）
  • CSS注释：/*注释内容*/
  1.     <!DOCTYPE html>
  2.     <html>
  3.         <head>
  4.             <title></title>
  5.             <style>
  6.                 span{
  7.                     font-size:120px;
  8.                     color:red;
  9.                     border:1px solid blue;
  10.                 }
  11.             </style>
  12.         </head>
  13.         <body>
  14.             <span>111</span>
  15.             <span>222</span>
  16.         </body>
  17.     </html>

CSS选择器

基本选择器

  • 元素选择器

    HTML标签又名HTML元素。

    元素选择器：即以HTML标签名作为选择器名称。

    作用：选择CSS样式代码，作用于对应标签上。
  • 格式

    标签名{ /*CSS样式代码*/ }
  • 适用范围：适用于将相同样式作用在多个同名标签上。
  • 类选择器

    每个HTML标签都有一个class属性，class属性值即为类名。

    类选择器：即以HTML的类名（class属性值）作为选择器名称。

    作用：选择CSS样式作为代码，作用于对应类名的HTML标签上。
  • 格式：

    .类名{ /*CSS样式代码*/ }
  • 使用范围：适用于将样式一次作用在相同类名的标签上。
  • id选择器

    每个HTML标签都有一个id属性，id的属性值必须在本页面是唯一的。

    id选择器：即以HTML的id（id属性值）作为选择器名称。

    作用：选择器CSS样式代码，作用于某个规定id值的HTML标签上。
  • 格式：

    #id值{ /*CSS样式代码*/ }

    *适用范围：适用于将样式作用在某个标签上（更有针对性）。
  1.     <!DOCTYPE html>
  2.     <html>
  3.         <head>
  4.             <title></title>
  5.             <style>
  6.                 span{
  7.                     color:blue;
  8.                 }
  9.                 .div1{
  10.                     border:1px solid red;
  11.                     background-color:yellow;
  12.                 }
  13.                 #div2{
  14.                     border:1px solid black;
  15.                     background-color:green;
  16.                 }
  17.             </style>
  18.         </head>
  19.         <body>
  20.             <span>行内标签<span>
  21.             <div class="div1">块级标签1<div>
  22.             <div id="div2">块级标签2<div >
  23.         </body>
  24.     </html>

基本选择器的组合方式

  • 层级关系

    标签和标签之间有层级关系，例如<html>标签中的子标签为<body>标签。

    我们可以对基本选择器进行组合，表现出层级关系，从而更加针对性地把样式作用于某些标签上。
  • 格式：

    选择器1 选择器2 ......{ /*CSS样式代码*/ }
  1.     <!DOCTYPE html>
  2.     <html>
  3.         <head>
  4.             <title></title>
  5.             <style>
  6.                 div font{
  7.                     color:red;
  8.                 }
  9.             </style>
  10.         </head>
  11.         <body>
  12.             <div>
  13.                 <font>我想火</font>
  14.             </div>
  15.             <font>我想火火不了</font>
  16.         </body>
  17.     </html>

CSS样式

边框属性

  • border

    设置边框的样式
  • 格式：宽度 样式 颜色。

    （例如：1px solid red -> 1像素粗 实线 红色边框）
  • width

    用于设置标签的宽度。
  • height

    用于设置标签的高度。
  • background-color

    用于设置标签的背景颜色。
  • 背景颜色设置的两种主流方式：

    1.英文单词->例如：red;blue。yellow;

    2.颜色代码->例如：#fff。(格式：#红绿蓝，每个颜色用两个16进制位数表示)

布局

  • float

    通常默认的排版方式，将页面中的元素从上到下一一罗列，而实际开发中，需要左右方向式进行排版，就需要使用浮动属性。
  • 格式：选择器{float:属性值;}
  • 常用属性值：

    none:元素不浮动（默认值）。

    left：元素向左浮动。

    right：元素向右浮动。

注意事项：因为元素设置浮动属性后，会脱离原有文档流（会脱离原有的版式），从而会影响其他元素的样式，所以设置浮动后，页面样式需要重新调整。

  1.     <!DOCTYPE html>
  2.     <html>
  3.         <head>
  4.             <title></title>
  5.             <style>
  6.                 #d1{
  7.                     background-color:red;
  8.                     width:100px;
  9.                     height:100px;
  10.                     float:left;
  11.                 }
  12.                 #d2{
  13.                     background-color:green;
  14.                     width:110px;
  15.                     height:110px;
  16.                     float:left;
  17.                 }
  18.                 #d3{
  19.                     background-color:blue;
  20.                     width:120px;
  21.                     height:120px;
  22.                     float:left;
  23.                 }
  24.             </style>
  25.         </head>
  26.         <body>
  27.             <div id="d1"></div>
  28.             <div id="d2"></div>
  29.             <div id="d3"></div>
  30.         </body>
  31.     </html>

转换

  • display

    HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块级元素和行内元素。
  • 块元素： 以区域块的方式出现，每个块标签独自占据一整行或多整行，块结束会自动换行。块结束会自动换行。

    常见的块元素：<h1>、<p>、<div>、<ul>等。
  • 行内元素： 根据内容多少来占用行内空间，不会自动换行。

    常见的行内元素：<span>、<a>等。
  • display属性可以使得元素在行内元素和块元素之间相互转换。
  • 格式：

    选择器[display属性值]
  • 常用的属性值：

    block：此元素将显示为块元素（块元素默认的display属性值）

    inline：此元素将显示为行内元素（行内元素默认的display属性值）

    none：此元素将被隐藏，不显示，也不占用页面空间。
  1.     <!DOCTYPE html>
  2.     <html>
  3.         <head>
  4.             <title></title>
  5.             <style>
  6.                 div{
  7.                     display:inline;
  8.                 }
  9.             </style>
  10.         </head>
  11.         <body>
  12.             <div>变为行内元素</div>
  14.             <span>行内元素</span>
  15.         </body>
  16.     </html>

字体

  • font-size

    用于设置字体的大小。
  • color

    用于设置字体的颜色。

JavaWeb第二天--CSS的更多相关文章

  1. 第二部分----CSS的基础语法

    PART-1 CSS的基础常识 一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...

  2. HTML第二课——css【2】

    请关注公众号:自动化测试实战 现在继续上一节课的内容,看下面代码: <!DOCTYPE html><html><head>    <meta charset= ...

  3. 超全面的JavaWeb笔记day02<CSS&JavaScript>

    1.CSS的简介 2.CSS概述和与HTML的结合方式(四种)(*******) 3.CSS的基本选择器(******) 4.CSS的扩展选择器(了解) 5.CSS的盒子模型(了解) 6.CSS的布局 ...

  4. JavaWEB开发02——CSS&JS

    今日目标 使用CSS完成网站首页的优化 使用CSS完成网站注册页面的优化 使用JS完成简单的数据校验 使用JS完成图片轮播效果 教学目标: 了解CSS的概念 了解CSS的引入方式 了解CSS的基本用法 ...

  5. JavaWeb前端：CSS

    CSS 主要是要熟悉的掌握选择器 Div 的盒模型: 整个网页被切割成一个一个盒子,盒子可以套盒子,每个盒子通过以下几个主要属性来控制显示位置: 边框 Border-top, Border-botto ...

  6. Html标签第二课css

    css(Cascading Style Sheet)叠层样式表.用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言. 一:样式三种控制方法 1.行内样式: <div  style=& ...

  7. 带你玩转JavaWeb开发之三 - CSS从基础到实战

    一,什么是CSS? Cascading Style Sheets层叠样式表           层叠:就是层层覆盖叠加,如果有多种样式对同一html标签进行修饰,样式有冲突的部分应用优先级高,不冲突的 ...

  8. HTML第二部分 CSS样式表

    CSS(cascading style sheets,层叠样式表),作用是美化HTML网页. /*注释*/   注释语法 2.1 样式表的基本概念 2.1.1样式表的分类 1.内联样式表 和HTML联 ...

  9. web前端-----第二弹CSS

    web前端之CSS样式 CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. ''' selector { property: value; property: value; ...

随机推荐

  1. offsetWidth的bug

    #div1{width:200px;border:1px solid red;} 这个时候如果用 offsetWidth 提取 #div1 的宽  得到的值是 202: 也就是说 offsetWidt ...

  2. Resource Site

    GameDevMarket.net Collection of Music, Sound effects (sfx), 2D/3D/GUI Art. http://gaurav.munjal.us/U ...

  3. JDOJ 2175: 忠诚2

    JDOJ 2175: 忠诚2 题目传送门 Description 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家总是让 ...

  4. CentOS7 安装 vsftpd 服务

    CentOS7 安装 vsftpd 服务 0.FTP简介 FTP服务是一个跨平台的文件共享解决方案 0.1.FTP两种模式的区分:服务端的主被动模式 1)ftp一般分为两种模式,PORTFTP和PAS ...

  5. c#-泛型、协变、逆变

    泛型简单介绍: 可以使用泛型声明的元素:类.接口.方法.委托 泛型之前:泛型之前使用object封装不同类型的参数,缺点:性能差.运行时判断类型(不安全)...泛型是在编译期间转为实际类型副本,所以性 ...

  6. 在Hadoop-3.1.2上安装HBase-2.2.1

    目录 目录 1 1. 前言 3 2. 缩略语 3 3. 安装规划 3 3.1. 用户规划 3 3.2. 目录规划 4 4. 相关端口 4 5. 下载安装包 4 6. 修改配置文件 5 6.1. 修改策 ...

  7. django -- 实现ORM登录

    前戏 上篇文章写了一个简单的登录页面,那我们可不可以实现一个简单的登录功能呢?如果登录成功,给返回一个页面,失败给出错误的提示呢? 在之前学HTML的时候,我们知道,网页在往服务器提交数据的时候,都是 ...

  8. 复旦大学2018--2019学年第二学期（18级）高等代数II期末考试第六大题解答

    六.(本题10分)  设 $A$ 为 $n$ 阶实对称阵, 证明: $A$ 有 $n$ 个不同的特征值当且仅当对 $A$ 的任一特征值 $\lambda_0$ 及对应的特征向量 $\alpha$, 矩 ...

  9. java连接redis中的数据查、增、改、删操作的方法

    package com.lml.redis; import java.util.HashMap;import java.util.Iterator;import java.util.Map;impor ...

  10. [C#]AdvPropertyGrid的使用示例(第三方控件:DevComponents.DotNetBar2.dll)

    开发环境:Visual Studio 2019 .NET版本:4.5.2 效果如下: 1.初始化界面: 2.属性“人物”-自定义控件显示: 3.属性“地址”-自定义窗体显示: 4.属性“性别”-枚举显 ...