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注释：/*注释内容*/
    <!DOCTYPE html>

    <html>

        <head>

            <title></title>

            <style>

                span{

                    font-size:120px;

                    color:red;

                    border:1px solid blue;

                }

            </style>

        </head>

        <body>

            <span>111</span>

            <span>222</span>

        </body>

    </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样式代码*/ }

    *适用范围：适用于将样式作用在某个标签上（更有针对性）。
    <!DOCTYPE html>

    <html>

        <head>

            <title></title>

            <style>

                span{

                    color:blue;

                }

                .div1{

                    border:1px solid red;

                    background-color:yellow;

                }

                #div2{

                    border:1px solid black;

                    background-color:green;

                }

            </style>

        </head>

        <body>

            <span>行内标签<span>

            <div class="div1">块级标签1<div>

            <div id="div2">块级标签2<div >

        </body>

    </html>

基本选择器的组合方式

  • 层级关系

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

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

    选择器1 选择器2 ......{ /*CSS样式代码*/ }
    <!DOCTYPE html>

    <html>

        <head>

            <title></title>

            <style>

                div font{

                    color:red;

                }

            </style>

        </head>

        <body>

            <div>

                <font>我想火</font>

            </div>

            <font>我想火火不了</font>

        </body>

    </html>

CSS样式

边框属性

  • border

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

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

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

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

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

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

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

布局

  • float

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

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

    left：元素向左浮动。

    right：元素向右浮动。

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

    <!DOCTYPE html>

    <html>

        <head>

            <title></title>

            <style>

                #d1{

                    background-color:red;

                    width:100px;

                    height:100px;

                    float:left;

                }

                #d2{

                    background-color:green;

                    width:110px;

                    height:110px;

                    float:left;

                }

                #d3{

                    background-color:blue;

                    width:120px;

                    height:120px;

                    float:left;

                }

            </style>

        </head>

        <body>

            <div id="d1"></div>

            <div id="d2"></div>

            <div id="d3"></div>

        </body>

    </html>

转换

  • display

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

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

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

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

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

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

    none：此元素将被隐藏，不显示，也不占用页面空间。
    <!DOCTYPE html>

    <html>

        <head>

            <title></title>

            <style>

                div{

                    display:inline;

                }

            </style>

        </head>

        <body>

            <div>变为行内元素</div>

            <span>行内元素</span>

        </body>

    </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. 201871010123-吴丽丽《面向对象程序设计（Java）》第四周学习总结

    201871010123-吴丽丽<面向对象程序设计(Java)>第四周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这 ...

  2. python基础语法16 面向对象3 组合，封装，访问限制机制，内置装饰器property

    组合: 夺命三问: 1.什么是组合? 组合指的是一个对象中,包含另一个或多个对象. 2.为什么要用组合? 减少代码的冗余. 3.如何使用组合? 耦合度: 耦: 莲藕 ---> 藕断丝连 - 耦合 ...

  3. NOIP 2013 积木大赛

    洛谷 P1969 积木大赛 洛谷传送门 JDOJ 2229: [NOIP2013]积木大赛 D2 T1 JDOJ传送门 题目描述 春春幼儿园举办了一年一度的"积木大赛".今年比赛的 ...

  4. 移动端touch与click区别--移动端开发整理笔记（五）

    移动端用touch还是click? 在移动端开发中,click事件有300ms的延时,由来源于iphone处理双击缩放功能种下的坑.因为用手指在屏幕上快速点击两次,iOS 自带的 Safari 浏览器 ...

  5. ES6学习笔记 -- 尾调用优化

    什么是尾调用? 尾调用(Tail Call)是函数式编程的一个重要概念,就是指某个函数的最后一步是调用另一个函数. function f(x) { return g(x) } 如上,函数 f 的最后一 ...

  6. React / Ant Design Pro 实现Canvas画布实时自适应

    如何实现canvas根据父容器进行自适应? Ant Design的组件都提供了强大的自适应能力,为了对齐父组件,镶嵌在Ant Design组件里的canvas也需要能根据父级容器进行自适应的能力,页面 ...

  7. [PHP] Laravel使用redis保存SESSION

    Laravel使用redis保存SESSION 首先确认服务器已经安装redis服务,php安装了redis扩展. 1.打开config/database.php.在redis配置项中增加sessio ...

  8. Intellij Idea 星云常用配置工具箱

    1. 软件配置篇 1.1 关闭默认打开最近的工程选项 1.2. 修改快捷键 1.3 修改字体 1.4 创建类模板 效果如下: 1.5 创建接口模板 效果同上 2. 插件篇 1.1 省略Getter a ...

  9. 游记&退役记

    划水两天. 给61级和62级都讲过课了,圆了一个梦吧. 62级好好学,61级更是. 老人进养老院了,小孩子也该从幼稚园出来了. 祝广一所有OIER,前程似锦,实力++,rp++. 奶一口zbq:NOI ...

  10. 不刷新网页修改url链接：history.pushState()和history.replaceState()新增、修改历史记录用法介绍

    最近遇到了在不刷新页面的情况下修改浏览器url链接的需求,考虑到可以通过history.pushState()解决.现在将我理解的一些内容分享一下,不对的地方欢迎大家指出. 在使用方法前首先需要了解它 ...