乐趣区

关于css:CSS基础一

1、CSS 是什么

即层叠样式表,HTML负责构造,而 CSS 则丑化HTML,增加各种款式如:宽高距离、大小色彩、动画及其他装璜成果

2、引入形式

引入形式共有三种:

  1. 行内款式:写在标签元素外面,以 style="" 模式,优先级最高(不举荐,显得太过于简单)
  2. 内联款式:写在 <style></style> 这对标签中,款式少的话间接写在这里
  3. 外联款式:写在 .css 文件中,而后用 <link src=""> 引入款式(举荐,不过还有@import

link@import 移入办法的区别:

1、加载子资源的限度

  • link是 XHTML 的标签,解决加载 CSS 文件外,还能够加载 RSS 等其余事物,如加载模板
  • @import 只能加载 css 文件

2、加载形式

  • link 引入 css 文件,在页面载入时同时加载,即 同步加载
  • @import 援用 css 文件,须要等到页面齐全载入后,再加载 css 文件,即 异步加载

3、兼容性

  • link 是 XTHML 的标签,没有兼容问题
  • @import 是在 css2.1 中提出来的,不反对低版本的浏览器

4、扭转款式

  • link标签是 DOM 元素,反对应用 JS 管制 DOM 和批改款式
  • @import 是办法,不反对管制 DOM 和批改款式

3、CSS 选择器

CSS 选择器分为简略选择器和复合选择器

简略选择器

简略选择器个别蕴含: 标签选择器 类选择器 id 选择器 通配符选择器

  1. 标签选择器:就是以 divspanp等标签作为选择器
  2. 类选择器:.colorRed {},为标签增加该类就能够增加该款式
  3. id 选择器:#colorRed {},领有该 id 款式的那个标签就领有该款式(惟一)
  4. 通配符选择器:* {},作用范畴是整个页面,个别用作 CSS 初始化

留神:

  • 类选择器能够用在不同的标签上;类名就像人的名字,能够多人应用同一个名字,所以类选择器能够用在多个标签
  • id 选择器 个别用在唯一性的标签;id 就像人的身份证号,每一个人都有一个惟一的身份证号,所以每一个标签的 id 也是惟一的,所以一个 id 选择器 只用在一个标签

所以,类选择器和 id 选择器最大的区别是应用次数

复合选择器

复合选择器是建设在简略选择器的根底之上的,它是由两个或两个以上的选择器组合而成的

1、后辈选择器

ul li {...}
  • 两个元素以空格隔开,意思是 ul 标签中的所有 li 标签
  • 第二个能够是儿子元素,也能够是孙子元素,只有是在 ul 中的就行
  • 能够层层嵌套,多个简略选择器

2、子选择器

div > p {...}
  • 抉择离 div 最近的一级子元素p,孙子元素p 甚至更远的都不选中
  • 留神:p 必须是亲儿子

3、并集选择器

p, a {...}
  • 所谓并集就是两个并列的,即pa 都增加该款式
  • 两个标签之间用逗号 (,) 隔开,能够了解为

4、伪类选择器

伪类选择器就是向某个选择器增加非凡的成果,其格局就是选择器前面加上冒号(:)

链接伪类选择器

a:link {...}      /* 抉择所有未被拜访的链接 */
a:visited {...}   /* 抉择所有已被拜访的链接 */
a:hover {...}     /* 抉择鼠标指针位于其上的链接 */
a:active {...}    /* 抉择流动链接(鼠标按下未弹起的链接) */

focus 伪类选择器

该选择器用于获取焦点的表单元素,个别状况下也是用于表单元素

/* 表单获取焦点时 批改色彩 */
input:focus {color:blue}  

用得比拟少

权重

CSS 中优先级如下:

!important > 内联款式 style > id (权重 100) > class(权重 10)> 标签(权重 1)

4、字体、文本属性

字体款式

1、font-family:定义文本的字体系列

常见的字体系列:

`body {font-family: Arial, 'Microsoft YaHei', Tahoma, 'Hiragino Sans GB';}` 

2、font-size:字体大小

  • px 像素是咱们最罕用的单位,还有 emrem

    1. em:绝对容器字体大小,且会继承父元素的字体大小
    2. rem:绝对于根元素(通常是 HTML 元素)字体的大小
  • 谷歌浏览器默认是 16px

3、font-weight:字体粗细

/* 粗体 */
p {font-weight: bold}  
  • 默认值:normal,等同于 400
  • 粗体:bold,等同于 700

举荐用数字,并且数字不加单位

4、font-style:文字款式

p {font-size: normal}
  • normal:默认值,浏览器会显示规范的字样
  • italic:显示斜体

这个平时用得较少,反而要给斜体标签(emi)改为不歪斜

5、font:字体复合属性

p {font: font-style font-size font-weight font-family;}
  • 留神:不能更换程序

文本属性

1、文本色彩

color:定义文本色彩

p {color: red;}

色彩属性值示意形式:

  • 预约义的色彩值:redblue
  • 十六进制:#333333#ffffff
  • RGBrgb(255, 0, 0)

2、对齐文本

text-align:用于设置元素内文本内容的程度对齐形式

div {text-align: center;}
  • left:左对齐
  • right:右对齐
  • center:居中对齐

3、装璜文本

text-decration:增加到文本的润饰,如:上划线、下划线、删除线

a {text-decration: none}
  • none:默认值,即没有装璜线
  • underline:下划线,链接 a 会自带下划线
  • overline:上划线
  • line-through:删除线

罕用 text-decration: none 去除链接的自带的下划线

4、文本缩进

text-indent:用于指定文本第一行缩进,罕用于段首

p {text-indent: 32px;}
  • 默认一个字是 16px,缩进两个字就是 32px
  • 也能够应用 2em,绝对缩进

5、行间距

line-height:用于设置行高

p {line-height: normal}
p {line-height: 26px}
p {line-height: 1.5}
p {line-height: 1.5em}
p {line-height: 150%}
  • normal:默认值
  • 26px:字体高为 16px,那么行距就是 10,高低各 5px
  • 数字:行高就是 数字 * 字体大小,所以 1.5 就是 29px
  • em:浏览器字体默认是 16px,那么 1.5em 就是 29px
  • 百分比:百分比 * 字体大小

举荐应用 数字型 的

5、CSS 显示模式

1、块元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

特点:

  1. 本人独占一行
  2. 大小、内外边距 能够轻易改
  3. 宽度默认是父级容器的 100%
  4. 块元素外面能够放块级元素或行内元素

留神:

  • 段落标签 <p> 比拟非凡,它是用来放文字,外面不能放块级元素,特地是div
  • <h1> ~ <h6> 也是
/* 将元素转换为块级元素 */
span {display: block}

2、行内元素

常见的行内元素有 <span>、<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>等,

有的中央也称为 内联元素

特点:

  1. 相邻行内标签在一行上显示,一行能够显示多个
  2. 宽高设置有效,默认宽度是它自身内容的宽度
  3. 行内元素只能包容文本或者其它行内元素

留神:

  • 链接外面不能再放链接
  • 非凡状况链接 外面能够放块级元素,然而给 转换一下块级模式最平安
/* 将元素转换为行内元素 */
div {display: inline}

3、行内块元素

行内块元素就那么几个:<img>、<input>、<button>、<td>,它同时具备行内元素和块级元素一些个性

<img> 是一个行内块元素

特点:

  • 相邻元素在一行显示,一行显示多个行内块元素,然而它们之间没有缝隙(行内元素特点)
  • 默认宽度就是它自身内容的宽度(行内元素特点)
  • 宽高、内外边距都是能够批改的

总的来说,行内块元素就是 一行能够包容多个元素,而这些元素又能够批改宽高

/* 将元素转换为行内块元素 */
ul li {display: inline-block;}

6、盒子模型

CSS 盒子模型实质上是一个盒子,包含边框、外边距、内边距 和 实例内容

盒子的理论大小是由外边距、内边距、内容决定的

盒子大小 = 边框 + 内边距 + 理论内容

1、边框

  • border-width:边框粗细,单位为px
  • border-style:边框款式

    1. solid:实线边框,最罕用
    2. dashed:虚线边框
    3. dotted:点线边框
  • border-color:边框色彩

咱们个别都是简写:

border : 2px solid red;
  • 程序不能够更改
  • 也能够独自设置高低、左右边框

还能够设置边框圆角

border-redius: length
  • length:能够是 数值 + px,或者是 百分比
  • 还能够独自设置某个圆角,如 上左角:border-top-left-radius

2、外边距

外边距即盒子与盒子之间的内部间隔,能够独自设置上下左右外边距,也能够简写:

/* 别离设置上下左右外边距 */
margin: top right bottom left

/* 设置 上、左右、下 */
margin: top left-right bottom

/* 设置高低、左右外边距 */
margin: top-bottom left-right;

外边距典型的利用:设置元素 居中显示

  • 前提:该元素必须设置width
  • margin: 0 auto:高低为0,左右居中

3、内边距

内边距即盒子的外部间隔,能够独自设置上下左右内边距,也能够简写:

/* 别离设置上下左右外边距 */
padding: top right bottom left

/* 设置 上、左右、下 */
padding: top left-right bottom

/* 设置高低、左右外边距 */
padding: top-bottom left-right;
  • 留神:设置内边距会撑大盒子

4、外边距合并

对于两个嵌套关系(父子关系)的块元素,它们有各自的上外边距,然而这两个嵌套的元素的其外边距时合并的,当任意一个的 margin 扭转,另一个会随着扭转

#a {
    width: 300px;
    height: 100px;
    background-color: red;
    overflow: hidden
    /* border-top: 1px solid #fff; */
    /* padding-top: 1px; */
}

#b {
    width: 200px;
    height: 300px;
    background-color: blue;
    margin: 100px;
}
<div id="a">
    <div id="b"></div>
</div>

解决办法:

  • 为父元素定义上边距
  • 为父元素定义上内边距
  • 为父元素增加 overflow: hidden;

7、CSS 三大个性

CSS 有三大个性:层叠性、继承性、优先性

7.1 层叠性

当呈现雷同选择器给雷同的属性设置不同属性值时,就会呈现抵触,而层叠性就是为了解决这种抵触的

如果款式抵触,就会采取 就近准则,哪个写在前面,就执行哪个款式

div {color: red;}

div {color: pink;}

像这样会执行前面那个,也就是粉红色

7.2 继承性

继承性就是子标签会继承父标签的 某些 款式

  • 可继承:text-font-line- 这些元素结尾的,还有color
  • 不可继承:borderpaddingmarginwidthheight

总的来说,跟字体相干的款式通常能够继承,与尺寸大小相干的款式通常不可继承

7.3 优先性

当同一个元素指定多个选择器的时候,通常会有优先级的产生

  • 选择器雷同,会执行层叠性
  • 选择器不同,会依据选择器权重执行

!important > style(内联)> Id(权重 100)> 类、伪类、属性选择器(权重 10)> 属性、标签选择器(权重 1)

退出移动版