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


PART-1 CSS的基础常识


一、什么是CSS?

W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化。其倡导中第一条的“表现”指的便可以说是CSS。CSS全称Cascading Style Sheets,中文名为层叠样式表,是一种用来表现HTML等文件样式的计算机语言。



 二、CSS应用的三种方式:

1. 行内样式表

行内样式表将CSS样式与HTML代码完全杂糅在一起,不符合W3C关于内容与表现分离的的基本规则,且不利于网站的维护。但是行内样式表在样式测试方面提供了便利,且优先级最高。不推荐使用。

2. 内部样式表

内部样式表在一定程度上将CSS样式与HTML代码分离,但是分离不够彻底,无法实现样式复用。(样式复用:多个网页共享同一样式。)内部样式表的优先级要低于行内样式表。

3. 外部样式表

外部样式表实现了CSS样式与HTML代码的彻底分离,方便样式复用和网站的维护,符合W3C规范。外部样式表的优先级低于内部样式表。在后续开发中,首推外部样式表。

[导入CSS文件的两种方式]
             *    ① 在<head>标签中,使用link链接:
             *      <link rel="stylesheet" type="text/css"
             *            href="css/02-CSS.css" />
             *    ② 在<style>标签中,使用@import导入:
             *      @import url("css/02-CSS.css");
             *
             *       [两种导入方式的区别]
             *    ① link属于标准的HTML标签,而@import不是标准标签;
             *    ② link可以兼容所有低版本浏览器,而@import只在CSS2之后能用;
             *    ③ link是将两个文件链接起来,起桥梁作用; 而@import相当于将CSS文件复制到HTML文件中;
             *    ④ link会在HTML文件边加载的过程中,边链接CSS文件;
             *      @import会在HTML文件全部加载完以后,再导入CSS文件;
             *
             *    综上所述,我们使用link链接的方式,加载CSS文件。

4. 注意

①除行内样式表,内部样式表与外部样式表的链接均写于HTML的HEAD部分中。

②导入外部样式表时,除type属性可选写外,rel与href属性必须出现。



  PART-2 CSS的常用选择器


1. 选择器的命名规则

①只能由字母、数字、下划线组成,不能有任何特殊字符;

②开头不能是数字,只能由下划线或者字母开头。

2. 常用选择器

2.1 标签选择器

写法:HTML标签名{}

作用:选中页面中所有的对应标签。

2.3 Class选择器

写法:.选择器名称{}

作用:需要改变样式的标签上使用class="选择器名称"来调用对应选择器。

2.4 Id选择器

写法:#选择器名称{}

作用:需要改变样式的标签上使用id="选择器名称"来调用对应选择器。

2.5 通用选择器

写法:*{}

作用:选中页面中所有标签。

2.6 后代选择器

写法:选择器1 选择器2 选择器3...{}

作用:比如说 div .li{}就表示满足div里面的class="li"的元素样式,其中选择器之间允许隔代。

生效规则: 只要满足,后一选择器是前一个选择器的后代,即可成效。(后代包括子代、孙代、重孙代。。。)
             *
             * 通俗的讲:只要后一个选择器,在前一个选择器里面即可。

2.7 子代选择器

写法:选择器1>选择器2>选择器3...{}

作用:用法大致与后代选择器相同,但要注意的是,选择器之间不允许隔代。

2.8 并集选择器

写法:选择器1,选择器2,选择器3...{}

作用:比如说 .li,#li{} 表示具备class="li"或者id="li"的形式便可生效,相当于数学逻辑中的“或”。

生效规则: 多个选择器取并集,只要标签满足其中任意一个选择器,样式即可生效。

2.9 交集选择器

写法:选择器1选择器2选择器3...{}

作用:比如 .li,#li{} 表示必须同时具备class="li"和id="li"的形式可生效,相当于数学逻辑中的“且”。

生效规则: 多个选择器取交集,则必须满足所有选择器的要求,才能生效

2.10 伪类选择器

写法:选择器名称:伪类状态{}

常见的伪类状态:①link 未访问状态;②visited 已访问状态;③hover 鼠标指上状态;

④active 激活选定状态;⑤focus 获得焦点时状态(input常用)。

超链接多种伪类共存时的顺序: link/visited→visited/link→hover→active

3. 选择器的优先级

3.1 第一原则:近者优先!最内层选择器>>>>>>>外层!!!

例如:div ul li > div #ul

li在ul内层,所以li标签选择器能覆盖外层id选择器

3.2 当作用在同一层时:ID选择器>class选择器>标签选择器!!!

例如:div #li > div .li > div li

只要最后一个选择器都作用于li上,那无论之前有多少层

选择器嵌套,均没有远近关系。

3.3 当作用于同一层,且最后一层为同等选择器。

例如: div ul .li > div li

作用范围越精准,则优先级更高。

3.4 当优先级完全相同时,写在后面的选择器会覆盖前面的选择器 。



  PART-3 CSS的属性单位



1. 长度单位:像素px,在某些情况下可以使用百分比。

2. 颜色:

2.1 十六进制写法:#XXXXXX (X:1-F)。

2.2 颜色的英文名称。

2.3 RGB写法:(0-255,0-255,0-255)  三者由前到后分别对应红、绿、蓝三种颜色的比例。

2.4 RGBA写法:(0-255,0-255,0-255、0-1) 前三者同RGB写法,最后为透明度,此透明度 只会使当前控件变透明,并不会影响其子控件。



  PART-4 CSS的常用文本属性



1、 字体、字号类:                                                                                    
         *   ① font-weight: 字体粗细。 bold-加粗、normal-正常、lighter-细体
         *     也可以使用100-900数值,400表示normal,700表示bold
         *
         *   ② font-style: 字体样式。 italic-倾斜、normal-正常
         *
         *   ③ font-size: 字号。 可以写px单位,也可以写%
         *     200%表示浏览器默认大小(16px)的两倍=32px
         *
         *   ④ font-family: 字体系列(字体族)。
         *     >>> 可以直接写字体名,也可以写字体系列名。
         *     >>> 常用字体系列:serif-衬线体    sans-serif-非衬线体;
         *     >>> font-family可以接收多个值,用逗号分隔。表示优先使用第一个,如果没有这个字体,依次向后使用。 通常,最后一个值放字体系列名;
         *         eg: font-family: "黑体","微软雅黑",sans-serif;
         *     
         *   ⑤ font缩写形式:
         *     >>> 顺序必须是:
         *         font-weight font-style font-size/line-height font-family
         *     >>> 不同属性之间,用空格分隔;
         *     >>> font-size/line-height必须一组,用/分隔;
         *     >>> font-family多个字体之间,用逗号分隔
         *     >>> eg: font: bold italic 32px/50px "微软雅黑",serif;
         *
         * 2、 字体颜色
         *   ① color: 字体颜色  可以使单词、十六进制、RGB等
         *
         *   ② opacity: 透明度,可选值0-1
         *     [opacity和RGBA的区别](重点)
         *     >>> RGBA本身可以设置颜色,而opacity必须配合其他颜色属性来用;
         *     >>> rgba仅仅是让当前元素设置的颜色透明;
         *         而opacity,会让当前元素里面的所有文字、背景、子元素都透明;
         *
         *
         * 3、行距、对齐、其他类
         *   ① line-height: 行高。 可以写px单位、可以直接写数字(表示默认行距的几倍)、可以写% (表示默认行距的百分比)
         *

>>> 行高重要作用: 让单行文字在div中垂直居中?
         *         设置行高等于div的高度,即可让单行文字垂直居中
         *
         *   ② text-align:设置区域内的行级元素水平对齐方式left/center/right
         *
         *   ③ letter-spacing: 字符间距,字与字之间的距离
         *
         *   ④ text-decoration: 文本修饰;
         *     underline-下划线、overline-上划线、line-through-删除线、none-去下划线
         *
         *   ⑤ overflow: 设置超出区域文字的显示方式。
         *     >>> overflow: hidden; 超出区域的文字隐藏不显示;
         *       >>> overflow: scroll; 无论文字多少,都会显示水平垂直滚动条
         *       >>> overflow: auto; 自动。文字多显示滚动条,文字少,不显示滚动条。
         *       >>> 可以使用overflow-x和overflow-y单独修改两个方向的滚动条
         *             overflow-y: scroll; overflow-x: hidden;
         *
         *   ⑥ text-overflow:设置行末多余文字的显示方式;
         *     >>> clip-多余文字裁剪掉(默认效果)   ellipsis-多余文字省略号显示
         *     >>> 显示省略号,需要配合white-space: nowrap;使用
         *     >>> 【重点】 设置行末显示省略号(三行代码,缺一不可)
         *          overflow: hidden;
         *            white-space: nowrap;
         *            text-overflow: ellipsis;
         *
         *   ⑦ white-space: nowrap; 设置中文行末,不断行显示
         *
         *   ⑧ text-indent: 首行缩进。
         *
         *   ⑨ -webkit-text-stroke: 0.5px blue; 文字描边。
         *     -webkit-表示只有webkit内核浏览器生效、常见的有chrome、safari
         *
         *   ⑩ text-shadow: 文字阴影,有四个属性值,空格分隔;
         *     >>> 水平阴影距离,正数表示阴影右移,负数左移;
         *     >>> 垂直阴影距离,正数表示阴影下移,负数上移;
         *     >>> 阴影模糊距离, 0表示阴影一点不模糊;
         *     >>> 阴影的颜色;
         *     >>> eg:text-shadow: 20px -10px 2px blue;
         * &nbsp; 文字加空格



以下举例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS常用文本属性</title>
        <style type="text/css">
            .div1 {
                width: 200px;
                height: 200px;
                background-color: rgb(177,0,0);
                font-weight: 900px;
                font-style: italic;
                font-size:50px ;
                color: #CCCCCC;
                opacity: 0.7;
                line-height: 100px;
                letter-spacing: 10px;
                text-decoration: line-through;
                overflow: hidden;
                text-shadow: 1px 1px 20px green;
                text-indent: 20px;
                -webkit-text-stroke: 1px red;
                white-space: nowrap;
                text-overflow: ellipsis;
                /*font:italic bold 75%/1.8 ‘Microsoft Yahei‘,sans-serif;*/
                    }
        </style>
    </head>
    <body>
        <div class="div1">
                   嘿嘿嘿
        <br />哈哈哈哈哈
            </div>
    </body>
</html>

效果图如下:



  PART-5 CSS的常用背景属性



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

时间: 2024-11-05 20:30:15

第二部分----CSS的基础语法的相关文章

HTML——CSS的基础语法1

页面中所有CSS代码,需要写入到<style></style>标签中. style标签的type属性应该选择text/css,但是type属性可以省略. 1.CSS常用选择器 CSS修改页面中的所有标签,必须借助选择器选中.选择器中可以写多对CSS属性,用{}包裹:每个属性名与属性值之间用:分隔,多对属性之间,必须用;分隔 选择器{ 属性1:属性值1; 属性2:属性值2; } 1-1.标签选择器 写法:HTML标签名{}作用:可以选中页面中,所有与选择器同名的HTML标签. li{

HTML——CSS的基础语法2

一.盒模型 1-1.什么是盒模型? HTML5盒模型包括:内容(content).填充(padding.也叫做内边距).边框(border).边界(margin,也叫做外边距). 这些属性我们可以用日常生活中的常见事物--盒子作一个比喻来理解,所以叫它盒子模式. CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. (来自百度百科,本人稍做修改,如图:) 1-2.margin 外边距 1.只写一个值:表示四周的外边距均为指定的值:2.写两个值:第一个数为上下外边距 第二个数为

第二堂:Java基础语法

每一门编程语言都有自身独特的语法规则,但是作为"现代编程语言之父"的C语言,C语言中的很多东西和其他的编程语言及其相似. 每一门语言都有自身专属的标识符,一门语言的标识符不多,但是每个都有自身的作用. 数据,每一门语言都是数据.所以数据类型是一个非常基础的东西,在Java中数据类型一共只有11中,其中包括八种基本类型和三种引用类型.在八种基本的数据类型中,除了C语言中也存在的整型,浮点型,字符型之外:Java语言多出了一个布尔型,只存在真/假的布尔型. 变量:变量是每一门编程语言都不可

第二章,JAVA基础语法

一.注释: 单行注释://,JAVA编译器会忽略掉这部分信息. eg: package com.wangna; public class TestDemo { public static void main(String[] args) { // 此处为注释,编译代码时不编译 System.out.println("Hello MLDN."); }}

[JavaWeb基础] 028.CSS简介和基础语法

css 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 css 的优先顺序 浏览器缺省设置 外部样式表 内部样式表(位于 <head> 标签内部) 内联样式(在 HTML 元素内部) css 的基础语法 代码结构 颜色的写法   p { color

Java基础知识二次学习-- 第二章 基础语法与递归补充

第二章 基础语法与递归补充   时间:2017年4月24日10:39:18 章节:02章_01节,02章_02节 视频长度:49:21 + 15:45 内容:标识符,关键字与数据类型 心得:由字母,下划线,$,数字组成,应该由字母,下划线$开头,同时应该避开java保留字符 变量是内存中的一小块区域,使用变量名来访问这块区域 执行过程中的内存管理(疑问:这里的内存和Jvm的一样吗?) code segment 存放代码 data segment 静态变量 字符串常量 stack 栈 局部变量 h

CSS基础语法

1.简介 层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言.相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言.CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,

css基础系列教程:CSS基础语法1

css基础系列教程:CSS基础语法1 作者:www.divcss8.com 我们学习CSS要明白一个重要的问题,CSS主要是解决与实现表现(CSS)与结构(HTML)的分离.我们编写完HTML之后,如何通过CSS对HTML实现控制呢. 1.  行内样式 2.  内嵌样式 3.  链接样式 4.  导入样式 我们这一节课的示例就先从行内样式开始 行内样式:就是直接在HTML上写样式,就是HTML上加属性style=""这种形式.如 <p style="color:#f00

Spark入门到精通--(第二节)Scala编程详解基础语法

Scala是什么? Scala是以实现scaleable language为初衷设计出来的一门语言.官方中,称它是object-oriented language和functional language的混合式语言. Scala可以和java程序无缝拼接,因为scala文件编译后也是成为.class文件,并且在JVM上运行. Spark是由Scala进行开发的. Scala安装? 这里就讲一下Scala在Centos上进行安装的过程,和安装JDK差不多. 官网下载Scala:http://www