一、什么是CSS

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

二、CSS应用的三种方式

1. 行内样式表

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

2. 内部样式表

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

3. 外部样式表

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

4. 注意

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

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

三、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 当优先级完全相同时，写在后面的选择器会覆盖前面的选择器。

四、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写法，最后为透明度，此透明度只会使当前控件变透明，并不会影响其子控件。

五、常用的文本属性

1. 字体、字号

1.1 font-weight：字体的粗细，可选属性值：bold加粗 lighter细体 100-900数值

（400正常 700=bold）

1.2 font-size：字体大小，**px,或者**%

（浏览器默认字体大小的百分比，绝大部分默认为16px）

1.3 font-family：字体族，设置字体，多个字体样式之间用英文逗号分隔，浏览器解析时会从左往右依次解析选择可用字体，一般前面使用具体

字体名称，最后一个使用字体族名称。

（常用字体族名称：称线体serif 非称线体sans-serif 等宽体Monospace）

1.4 font-style：字体样式，可选属性值：normal正常 italic斜体

1.5 *font-variant：将字母转为小型大写字体

1.6 font（缩写形式）：font-style font-variant font-weight font-size/line-height font-family

[notice]顺序必须严格按照上述顺序；

多个样式之间用空格分割，而且font-size/line-height 必须按此格式；

font-size和font-family必须指定，其他样式不指定将采用默认样式。

>>>例如： font:italic bold 75%/1.8 'Microsoft Yahei',sans-serif；

斜体加粗 12像素/1.8倍行高微软雅黑,非衬线字体族

2. 字体颜色

2.1 color

2.2 opacity：0-1之间的数字，调整时控件以及控件子元素均会透明。

3. 行距、对齐

3.1 line-height ：行高有三种写法①**px ②正常行高的n倍**（倍）③*%

典型应用，调整控件中文字垂直居中，方式 :控件的height=控件的line-height

3.2 text-align：块级元素中文字的水平对齐方式，三种left center right

3.3 letter-spacing：字符间距，字与字之间的间距。

3.4 text-decoration：文本修饰，下划线underline 删除线line-through 上划线overline 去除none

3.5 overflow：控制超出范围文本的显示方式

3.6 hidden（超出范围文本隐藏） scroll（始终显示滚动条） auto(根据文字多少自动显示滚动条) -x -y

3.7 text-overflow：设置多于文字的显示方式，clip裁剪 ellipsis省略号

3.8 text-shadow：文本阴影

4个属性值：水平阴影距离（数值越大，阴影右移）

垂直阴影距离（数值越大，阴影下移）{前两个必选}

阴影模糊距离（越大越模糊，可选）

阴影颜色（可选，默认黑色）

3.9 text-indent：首行缩进，可用像素值调整大小

3.10 *text-stroke：文字描边

3.11 white-space:nowrap 修改中文行末不断行显示

3.12 word-break （浏览器默认在空格处断行）：break-all按字母断开（允许在单词内换行）/break-word按单词断开

下面举个栗子↓

 <!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>

效果图如下↓

六、常用背景属性

1. background 缩写形式

2. background-color 背景色

3. background-image 背景图

background-image: url(路径);

背景图和背景色同时存在时，背景图会覆盖背景色。

4. background-repeat 背景图重复方式

no-reapeat最常用，不平铺

reapeat平铺（默认）

repeat-x水平平铺

repeat-y垂直平铺

5. background-size 背景图大小：

【制定宽度高度】有两个属性；宽度高度

当只有一个属性值时，等比缩放；

当有两个属性值时，会按照制定的宽度高度进行压缩/拉伸显示。

宽高的写法: ①直接写像素；

②写百分比，代表父容器宽高的百分比；

其他属性值: 【覆盖】cover 图片等比缩放，使背景图完全覆盖背景区域

（可能导致背景图部分区域无法覆盖）

【图片等比缩放】contain 缩放至宽或高的某一边等于父容器宽高，另一条边按照图片大小缩放

（可能空余部分区域无法覆盖）

6. background-position 位置坐标、偏移量:

写法 ①指定位置：left/center/right top/center/bottom

当只写一个属性值时，另一个默认居中

②填写坐标像素：水平位置（像素/百分比）垂直位置（像素/百分比）

当只写一个属性值时，默认为水平方向，另一个垂直居中

>>>当使用像素时，以图片左上角往各个方向移动的实际距离

水平方向正数右移、负数左移；垂直方向正数下移、负数上移

[左负右正上负下正]

>>>当使用百分数时，一般只能用正数，代表去掉图片后，剩余空白距离的比例。

例如：background-position：30% 水平方向去掉图片后，剩余区域3:7分

7. background-clip 裁切背景图和背景色显示区域。

（不再显示区域内的背景图或背景色会被裁切不显示）

从边框外缘 border-box；从边框内缘 padding-box；从文字内容 content-box

不改变定位位置，只是通过裁切显示部分区域。

8. background-origin 设置背景图的定位方式，不能改动背景色。

从边框外缘 border-box；从边框内缘 padding-box；从文字内容 content-box

不改变背景图显示区域大小，只决定左上角定位位置。

下面举个栗子↓

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>这是一张名片</title>

        <style type="text/css">

            #div1{

                background-color:#18242C ;

                width: 450px;

                height: 320px;

            }

            .div2{

                height: 240px;

                width: 400px;

            }

            .h2{

                color: white;

                padding-top: 30px;

                margin-left: 30px;

                margin-right: 20px;

                padding-bottom: 20px;

                border-bottom: gray solid 1px;

            }

            .li{

                color: white;

                list-style: none;

                background-image: url(img/QQ20170301171904.png);

                background-repeat: no-repeat;

                text-indent: 30px;

                line-height: 20px;

                width: 20px;

                height: 20px;

                margin-bottom: 15px;

            }

            .li1{

                background-position: 0px 0px;

                white-space: nowrap;

            }

            .li2{

                background-position: -20px 0px;

                white-space: nowrap;

            }

            .li3{

                background-position: -40px 0px;

                white-space: nowrap;

            }

            .li4{

                background-position: -60px 0px;

                white-space: nowrap;

            }

            .li5{

                background-position: -80px 0px;

                width:360px

            }

        </style>

    </head>

    <body>

        <div id="div1">

        <h2 class="h2">联系我们</h2>

        <div class="div2">

            <ul>

                <li class="li li1">总机：0427-3293318</li>

                <li class="li li2">传真：0427-3293318</li>

                <li class="li li3">售后：0427-3293318</li>

                <li class="li li4">邮箱：lpei@lpei.com.cn</li>

                <li class="li li5">地址：辽宁省盘锦市兴隆台区高新技术产业园公园街</li>

            </ul>

        </div>

        </div>

    </body>

</html>

效果图如下↓

七、盒子模型

1. 外边距：margin

缩写形式

写一个值：上下左右四个方向均为指定数值；

写两个数值：第一个数等于上下margi，第二个数等于左右margin

写三个数值：上右下，左=右

写四个数值：上，右，下，左四个方向（顺时针）

>>>margin:0 auto; 块级盒子在父容器中水平居中！！！！

2. 边框：border

三个属性值，宽度width 样式style 颜色color 原则上不能少任何一个，顺序无影响

可以通过top/right/bottom/left分别修改四个方向

内边距：padding

3. 内边距：padding

会使和模型的整个可视区域变大，使用时需要注意盒模式实际显示的区间大小

其他同margin，但没有0 auto的用法！！

八、其他属性

1. border-radius 圆角

可以接受8个属性值X轴（左上，右上，右下，左下）/Y轴

例如：border-radius: 50px 50px 50px 50px/50px 50px 50px 50px;

*只写X轴时，Y轴默认等于X轴。只写左上角，默认等于右下角；只写右上角，默认等于左下角。

例如：border-radius: 50px 0px 50px 0px；

=border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;

=border-radius: 50px 0px ;

*只写一个数时，默认8个数都相等。

下面举个栗子↓

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

                .div2{

                    width: 100px;

                    height: 100px;

                    background-color: red;

                    border-radius: 50px 50px 50px 50px/50px 50px 50px 50px;

                }

        </style>

    </head>

    <body>

        <div class="div2"></div>

    </body>

</html>

效果图如下↓

2. box-shadow 盒子阴影

6个属性值，空格分割：

X轴阴影距离：必选，可正可负，正数右移，负数左移

Y轴阴影距离：必选，可正可负，正数下移，负数右移

阴影模糊半径：可选，只能为正，默认为0，数值越大，越模糊

阴影扩展半径：可选，可正可负，默认为0，数值越大，阴影扩大，反之缩小

阴影颜色：可选，默认黑色

内外阴影：可选，可选值 inset(内阴影)，默认为 outset(外阴影)

下面举个栗子↓

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

                .div3{

                    width: 100px;

                    height: 100px;

                    background-color: blueviolet;

                    margin: 0 auto;

                    box-shadow: 0px 0px 50px 25px greenyellow inset;

                    border-radius: 50px 50px 50px 50px/50px 50px 50px 50px;

                        }

        </style>

    </head>

    <body>

        <div class="div3"></div>

    </body>

</html>

效果图如下↓

3. box-sizing

标准盒子：content为界定高低

IE盒子：border为界定高低

标准模式解析 content-size

怪异模式解析 border-size

4. Border-image 图片边框

十个属性值：

图片路径 url

图片的切片宽度：4个值，分别代表上，右，下，左四条切线。

通过四条切线切割后，会把图片分成九宫格，四个角分别对应边框的四角，四个边分别对应边框的四边。

【不会进行任何拉伸】【根据设置进行拉伸，平铺，铺满】【写的时候不能带像素单位】

图片边框的宽度：4个值，分别代表上右下左四条边框。【写的时候必须带像素单位】

背景重复方式：3个属性值，stretch（拉伸），round（铺满），repeat（平铺）

>>>铺满和平铺的区别

平铺会保持原有四条边的宽度，进行平铺。可能导致角落处无法显示完整一个图标；

铺满会对四条边进行适当的拉伸、压缩，确保可以刚好现实完全。

属性值写法：

border-image：路径切片宽度/边框宽度重复方式

>>>边框宽度可以省略，默认宽度等于切片宽度！

切片宽度可以只写一个或者两个或者三个，判断方式同padding,margin！

下面举个栗子↓

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

                .div4{

                    width: 200px;

                    height: 200px;

                    background-color: red;

                    border-image: url(img/QQ图片20170303142611.png) 27/27px repeat;

                }

        </style>

    </head>

    <body>

        <div class="div4"></div>

    </body>

</html>

效果图如下↓

小K的H5之旅-CSS基础（一）的更多相关文章

小K的H5之旅-HTML的基本结构与基本标签
一.什么是HTML HTML是超文本标签语言,即网页的源码.而浏览器就是翻译解释HTML源码的工具. 二.HTML文档的结构 HTML文档主要包括三大部分:文档声明部分.<head>头部部 ...
小K的H5之旅-HTML5与CSS3部分新属性浅见
一.HTML部分 1.HTML5新特点向下兼容.用户至上.化繁为简.无插件范式.访问通用性.引入语义.引入原生媒体支持.引入可编程内容 2.HTML5标签语法可以省略的元素:空元素语法的元素{br ...
小K的H5之旅-实战篇（一）
一.前言本K在经过两个星期的html和css学习之后,第一次去尝试完成一个网站主页的制作.在四天之后,本K也终于完成了杰瑞教育主页的html和css部分,至于部分涉及js的部分,因为本K还没有学习过 ...
h5 . css入门 2.CSS基础
CSS基础学习目标 1.CSS简介 2.CSS语法 3.样式的创建 4.两种引入外部样式表的区别 5.样式表的优先级和作用域 6.CSS选择器 7.选择器的权重 8.浮动属性的简单应用 9.HTML ...
【自编教材】16万8千字的HTML+CSS基础适合从0到1-可收藏
[图片链接有点小问题,这几天更新,敬请期待!] 目录第一章HTML基础 1.1 HTML简介和发展史 1.1.1 什么是HTML 1.1.2 HTML的发展历程 1.1.3 web标准 1.2 开 ...
妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
CSS基础知识01
一.CSS基础知识介绍 1.css是cascading style sheet层叠式样式表的简写 2.css小用法加粗:font-weight:bold; 正常用:norma ...
CSS 基础知识点样式选择器伪类
CSS 基础知识点汇集版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
HTML3/CSS基础
1. HTML 1.1 什么是HTML HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一种标记语言,不需要编 ...

随机推荐

如何禁止火狐onblur时alert()产生类似选中的拖蓝效果
输入框中onblur 然后alert();会产生复制选中的效果的效果( 拖蓝) onblur="aa()"function aa(){ alert("--" ...
script defer和async一探
今天几经折腾,终于回家了,最近公司上的事忙了好一阵子,终于可以闲下来,重新在整理一下,又重新了解了一下defer和async在页面加载过程差异. 定义和用法 async 属性规定一旦脚本可用,则会异步 ...
iOS开发 socket, 全局socket
因为项目的要求是全局的socket, 哪里都有可能使用到socket去发消息, 所以我把socket写在了单利里面项目用的是 pod 'CocoaAsyncSocket' 三方库, 是异步的, ...
【Java 并发】详解 ThreadPoolExecutor
前言线程池是并发中一项常用的优化方法,通过对线程复用,减少线程的创建,降低资源消耗,提高程序响应速度.在 Java 中我们一般通过 Exectuors 提供的工厂方法来创建线程池,但是线程池的最终实 ...
wpf之StackPanel、WrapPanel、WrapPanel之间的关系
一.StackPanel StackPanel是以堆叠的方式显示其中的控件 1.可以使用Orientation属性更改堆叠的顺序分为水平方向(Orientation="Horizontal& ...
Logback Pattern
Logback日志配置示例 <appender name="SYSLOG" class="ch.qos.logback.classic.net.SyslogAppe ...
内核初始化优化宏(__init, __devinit)
在内核里经常可以看到__init, __devinit这样的语句,这都是在init.h中定义的宏,gcc在编译时会将被修饰的内容放到这些宏所代表的section. 原文地址:http://blog.c ...
[Splay模版1]
输入第1行:1个正整数n,表示操作数量,100≤n≤200,000 第2..n+1行:可能包含下面3种规则: 1个字母'I',紧接着1个数字k,表示插入一个数字k到树中,1≤k≤1,000,000, ...
vue视频学习笔记04
video 4 手动配置自己:webpack+vue-loader webpack加载模块-------------------------------------如何运行此项目?1. npm ins ...
hdu 2710 Max Factor 数学(水题)
本来是不打算贴这道水题的,自己却WA了三次.. 要考虑1的情况,1的质因子为1 思路:先打表 ,然后根据最大质因子更新结果代码: #include<iostream> #include& ...

小K的H5之旅-CSS基础（一）

一、什么是CSS

二、CSS应用的三种方式

1. 行内样式表

2. 内部样式表

3. 外部样式表

4. 注意

三、CSS常用选择器

1. 选择器的命名规则

2. 常用选择器

3. 选择器的优先级

四、CSS属性单位

五、常用的文本属性

六、常用背景属性

七、盒子模型

八、其他属性

1. border-radius 圆角

2. box-shadow 盒子阴影

3. box-sizing

4. Border-image 图片边框

小K的H5之旅-CSS基础（一）的更多相关文章

随机推荐

热门专题