页面中所有CSS代码，需要写入到<style></style>标签中。

style标签的type属性应该选择text/css,但是type属性可以省略。

1、CSS常用选择器

CSS修改页面中的所有标签，必须借助选择器选中。
选择器中可以写多对CSS属性,用{}包裹：每个属性名与属性值之间用:分隔，多对属性之间，必须用;分隔

选择器｛
属性1:属性值1;
属性2:属性值2;
｝

1-1、标签选择器

写法：HTML标签名{}
作用：可以选中页面中，所有与选择器同名的HTML标签。

li{

    color: red;

    font-size: 24px;

}

1-2、类选择器(class选择器)

写法：.class名{}
调用：在需要调用选择器样式的标签上，使用class="class名"调用选择器

优先级：class选择器>标签选择器，两个起冲突时，优先级高的生效

注意：如果需要两个类名，用空格分隔

.first{

    color: blue;

}

1-3、id选择器

写法：#id名{}
调用：需要调用样式的标签，起一个id="id名"

优先级：id选择器>class选择器

注意：一个页面中，不能出现同名id

#one{

    background-color: yellow;

}

【class选择器与id选择器的区别】
1、写法不同：class选择器用.声明，id选择器用#声明
2、优先级不同：id选择器>class选择器
3、作用范围不同：class选择器可以多次调用，id选择器只能使用一次。

选择器的命名规范
1、只能有字母、数字、下划线、减号组成；
2、开头不能是数字，也不能是只有一个减号

一般起名要求有语义，使用英文单词与数字的组合。

1-4、通用选择器

写法：*{}
作用：可以选中页面中所有的HTML标签
优先级：最低！！！

*{

    color: orange;

}

1-5、并集选择器

写法：选择器1,选择器2,选择器3,……,选择器n{}
生效规则：多个选择器取并集，只要标签满足其中任意一个选择器，样式即可生效。

li,.first{

    color: red;

}

1-6、交集选择器

写法：选择器1选择器2……选择器n{} 所有选择器挨着，没有分隔
生效规则：多个选择器取交集，则必须满足所有选择器的要求，才能生效

li .first{

}

1-7、后代选择器

写法:选择器1 选择器2 …… 选择器n{} 选择器之间空格分割
生效规则：只要满足，后一选择器是前一个选择器的后代，即可生效。
（后代包括子代、孙代、重孙代。。。）

通俗地讲：只要后一个选择器，在前一个选择器里面即可。

div span{

}

1-8、子代选择器

写法:选择器1>选择器2>……>选择器n{} 选择器之间用>分隔
生效规则：必须满足，后一个选择器是前一个选择器的直接子代，才能生效。（中间不能隔任何标签）

div>span{

}

[伪类选择器]
写法：伪类选择器, 在选择器后面用:分隔，紧接伪类状态；
eg: .a:link .a:visited .a:hover .a:active

2、超链接的伪类状态：
：link--未访问状态：visited--已访问状态
：hover--鼠标指上状态：active--激活选定状态(鼠标点下未松)

注意：当超链接多种伪类状态同时存在时，必须按照link--visited--hover--active的顺序，
否则会导致部分选择器不生效。

3、input的伪类状态：
：hover ：focus--获得焦点状态：active

注意：input的多种状态同时存在，必须按照上面的顺序。

4、其他标签，基本只用：hover状态。

2、CSS的导入方式及优先级权重

2-1、优先级的权重
1、CSS生效的第一原则是：近者优先！即，哪个选择器作用于最里层标签，则这个选择器生效；
2、当选择器作用于同一层时，可以根据优先级权重进行累加计算：
id选择器*100>class选择器*10>标签选择器*1

注意：并集选择器，相当于多个选择器拆开写，所以，并集选择器的优先级不能累加

3、当选择器作用于同一层，且优先级权重相等时，写在最后的选择器生效

2-2、引入CSS的三种方式
1、行内样式表：直接在HTML标签中，使用style=""的方式引用；
<div style="height: 100px; "></div>
优点：使用灵活，优先级权重最高；
缺点：不符合w3c关于“内容与表现”分离的要求；不利于样式复用；
2、内部样式表：在<head></head>标签中，使用<style>标签包裹CSS代码；
特点：一定程度上实现了HTML与CSS的分离，但是分离不够彻底，没有办法多页面共用样式。
3、外部样式表：将CSS单独写入CSS文件中，并于HTML文件关联。
优点：彻底实现HTML与CSS的分离，符合W3C规范，有利于多页面复用统一样式。

2-2-1、导入CSS文件的两种方式
1、在<head></head>标签中，使用link链接：

引入外部CSS样式表：
rel：选择stylesheet
type：选择text/css，可以省略
href：表示链接的CSS文件路径

 <link rel="stylesheet" type="text/css" href="CSS/02-CSS.css" />

2、在style标签中使用@import导入

@import url("CSS/02-CSS.css");

[两种导入方式的区别]

①link属于标准的HTML标签，而@import不是标准标签；
②link可以兼容所有低版本浏览器，而@import只在CSS2之后能用；
③link是将两个文件链接起来，起桥梁作用，而@import相当于将CSS文件复制到HTML文件中；
④link会在HTML文件边加载的过程中，边链接CSS文件；
而@import会在HTML文件全部加载完以后，再导入CSS文件

3、CSS常用文本属性

^CSS中的颜色表示方式^
①直接使用颜色的单词表示：red green blue
②使用颜色的十六进制丨表示：#ffffff
六位数，两两分组，分别表示红、绿、蓝的配比；
③使用rgb(0~255,0~255,0~255)三位数，分别表示红、绿、蓝的配比；
④rgba():第四位数表示透明度。

width: 200px;

height: 200px;

background-color: rgb(255,255,255);

3-1、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:fongt-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
[rgba和opacity的区别]
>>>RGBA本身可以设置颜色，而opacity必须配合其他颜色属性使用
>>>rgba仅仅是让当前元素设置的颜色透明；
而opacity，会让当前元素里面的所有文字、背景、子元素都透明。
3、行距、对齐、其他类
①line-height：行高。可以写像素单位、可以直接写数字(表示默认行距的几倍)
可以写%(表示默认行距的百分比
>>>行高重要作用：让单行文字在div中垂直居中
设置行高等于div的高度，及可让单行文字垂直居中。(非常常用)
②text-algin：设置区域内的行级元素水平对齐方式；left、center、right
③letter-spacing: 字符间距，字与字之间的距离
④text-decoration: 文本修饰；
underline-下划线、overline-上划线、line-through-删除线、none

⑤overflow：设置超出区域文字的显示方式。
>>>overflow: hidden; 超出区域的文字吟唱不显示；
>>>overflow: scroll:无论文字多少，都会显示水平垂直滚动条；
>>>overflow: auto：自动，默认效果。文字多显示滚动条，文字少不显示滚动条
>>>可以使用overflow-x和overflow-y单独修改两个方向的滚动条。
overflow-x: scroll;overflow-y: hidden;

⑥text-overflow：设置行末多余文字的显示方式；
>>>clip：多余文字裁剪掉 ellipsis：多余文字显示省略号
>>>显示省略号需要配合white-space：nowrap；使用
>>>【重点】设置行末显示省略号(三行代码，缺一不可)

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

⑦white-space：nowrap；设置中文行末，不断行显示

⑧text-indent：首行缩进。

⑨-webkit-text-stroke: 文字描边。
-webkit-表示挚友webkit内核的浏览器生效，常见的有chrome、safari

⑩text-shadow：文字阴影，有四个属性值，空格分隔
>>>水平阴影距离，正数：表示阴影右移，负数：表示阴影左移；(左负右正)
>>>垂直阴影距离，正数：表示阴影下移，负数：表示阴影上移；(上负下正)
>>>阴影模糊距离，0表示阴影一点不模糊；
>>>阴影颜色；
缩写形式：text-shadow: 2px 2px 2px blue;

#div{

                font-weight: bold;

                font-style:italic;

                font-size: ;

                font-family: serif;

                font: bold italic 16px/50px "微软雅黑",serif;

                background-color: red;

                opacity: 0.5;

                line-height: 20px;

                text-align: center;

                letter-spacing: 5px;

                text-decoration: underline;

                overflow: auto;

                white-space: nowrap;

                text-overflow: ellipsis;

                text-indent: 20px;

                -webkit-text-stroke:0.5px blue;

                text-shadow: 2px 2px 2px blue;

            }

3-2、CSS常用背景属性

1、background-color：背景色

2、background-image: 背景图。使用url("")选择背景图片。
背景图和背景色同时存在时，背景图覆盖背景色。

3、background-repeat: 背景图的重复方式，
no-repeat：不平铺，repeat：平铺，repeat-x：沿x轴平铺，repeat-y：沿y轴平铺

4、background-size:背景图的大小
[指定宽度高度的写法]
>>>宽度高度的指定，可以写px，也可以写%(父容器宽高的百分比)
>>>当写两个属性时，分别表示宽度、高度
>>>当写一个属性时，表示宽度，高度将会等比缩放

[其他属性]
>>>contain：图片等比缩放，直到宽或高中较大的一边所放到100%为止。
(可能导致较短的一边<100%，图片无法覆盖全部区域)
>>>cover：图片等比缩放，直到宽或高中较小的一边缩放到100%为止。
(可能导致较大的一边>100%，图片超出区域显示不全)

5、background-position: 背景图偏移量
>>>指定位置:left/center/right top/center/bottom
当只写一个值时，另一个默认居中。
>>>指定坐标:两个属性分别表示水平位移垂直位移
①坐标的值，可以是px单位，也可以是百分数
②当写像素单位时：
水平方向：正数右移负数左移；垂直方向：正数下移负数上移；
(左负右正上负下正)
③当写%百分数时：一般只能是正数。
表示的是，父容器去掉图片的宽高，剩余空白区域的分布比例。
eg：background-position:30%；水平方向去掉图片宽度，剩余区域3：7分

            #div2{

                width: 25px;

                height: 25px;

                /*background-color: yellow;*/

                background-image: url("img/icon.gif");

                white-space: nowrap;

                text-indent: 30px;

                line-height: 25px;

                background-position: -133px 0px;

            }

            #div3{

                width: 24px;

                height: 28px;

                background-image: url("img/icon.gif");

                white-space: nowrap;

                text-indent: 30px;

                background-position: 0px -170px;

            }

            #div4{

                width: 42px;

                height: 19px;

                background-image: url("img/icon.gif");

                text-indent: 9px;

                font-size: 14px;

                white-space: nowrap;

                line-height: 16px;

                background-position: 0px -30px;

            }

※这里还有个小知识点

list-style: 修改小黑点的样式；
none 去点小黑点
url() 可以使用url导入一个小图片，作为列表的标识符号

float: 浮动可以实现让块级元素，在一行中显示

HTML——CSS的基础语法1的更多相关文章

CSS 的基础语法
1.基础语法规则 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 每条声明由一个属性和一个值组成.每个属性有一个值.属性和值被冒号分开. selector {property: val ...
第二部分----CSS的基础语法
PART-1 CSS的基础常识一.什么是CSS? W3C标准中,倡导有3:其一为内容与表现分离,其二为内容与行为分离,其三为内容结构的语义化.其倡导中第一条的"表现"指的便可以说 ...
HTML——CSS的基础语法2
一.盒模型 1-1.什么是盒模型? HTML5盒模型包括:内容(content).填充(padding.也叫做内边距).边框(border).边界(margin,也叫做外边距). 这些属性我们可以用日 ...
[JavaWeb基础] 028.CSS简介和基础语法
css 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
CSS 入门基础
一.CSS 介绍什么是CSS CSS 指的是层叠样式表(Cascading StyleSheet).在网页制作时采用层叠样式表技术, 可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控 ...
CSS基础语法与选择器
CSS基础语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...
CSS基础语法（一）
目录 CSS基础语法(一) 一.CSS简介 1.CSS语法规范 2.CSS代码风格二.CSS基础选择器 1.标签选择器 2.类选择器 3.id选择器 4.通配符选择器 5.总结三.CSS字体属性 ...
emmet 系列（1）基础语法
emmet 系列(1)基础语法 emmet 是一个能显著提升开发html和css开发效率的web开发者工具 emmet基本上目前已知的编辑器都有相应的插件,各个编辑器的emmet插件的下载地址:点我下 ...
前端学PHP之基础语法
× 目录 [1]代码标识 [2]注释 [3]输出 [4]计算表达式 [5]大小写 [6]空白符前面的话 PHP是一种创建动态交互性站点的强有力的服务器端脚本语言.PHP能够包含文本.HTML.CSS ...

随机推荐

一起学习c++11——c++11中的新增的容器
c++11新增的容器1:array array最早是在boost中出现:http://www.boost.org/doc/libs/1_61_0/doc/html/array.html 当时的初衷是希 ...
Solr6.6 创建core
原文:https://github.com/x113773/testall/issues/7 1. 首先在solr-6.6.0目录运行命令,启动solr:`Linux: $ bin/solr star ...
kbengine所有的demo源代码
回复才可见的内容https://github.com/kbengine/kbengine_ue4_demo回复才可见的内容https://github.com/kbengine/kbengine_og ...
Sublime Text 3 注册码
最近觉得Sublime Text3比Notepad++好使,可惜需要购买,于是网上搜了一下,屌丝的福音啊: Sublime Text Build 3065 License key复制如下三个任意一个正 ...
前端需要注意的seo
1 合理的title ,description ,keyswords 搜索引擎对这三项的权重逐渐减小,title 强调重点即可 ,重要的关键字不要超过两次,而且要靠前. 2 不同的tilte要有所不同 ...
voa 2015 / 4 / 25
When English speakers talk about time and place, there are three little words that often come up: in ...
Python Django之路与您同行
大家好,我是TT,互联网测试行业多年,没有牛逼的背景,也没有什么可炫耀的,唯独比他人更努力,在职场打拼.遇到过的坑,走过的弯路,愿意与大家分享,分享自己的经验,少走弯路.首发于个人公众号[测试架构师] ...
腾讯云centos7服务器环境搭建，tomcat+jdk+mysql+nginx
软件:jdk 1.8.0_45 tomcat 8.5.8 mysql 5.6.36 nginx 1.10.x或以上其中tomcat在centos6.8中没问题,centos7中会出现卡在启动那里 I ...
@Component @Controller @Service @Repository@Resourse
@Component @Controller @Service @Repository@Resourse这些全部是Spring提供的注解. 其中@Component用来表示把一个类纳入spring容器 ...
JavaScript语法基础(1)
1.JavaScript是什么? 1)定义: JavaScript「JS」是一种高级的.动态的. 弱类型的.解释型的计算机编程脚本语言. 2)原理: 3)组成: 3大部分: ◆ ECMAScript: ...

HTML——CSS的基础语法1