前端学习第55天 css三种引用、‘引用的优先级’、基本选择器、属性、display

一、css三种引用

1、什么是css

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

2、三种引用

（1）行间式

行内式是在标记的style属性中设定CSS样式。

```html
<div style="width: 100px; height: 100px">

</div>

```

（2）内联式

嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下

``html
<head>
<style>
选择器 {
width: 100px;
height: 100px;
}
</style>
</head>

```

（3）外联式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>
mystyle.css是相对路径中的文件
/* 适合团队高效率开发, 耦合性低, 复用性强 */

```

3、三种引用方式的优先级

1.没有优先级
2.不同的属性样式协同操作,相同的样式采用覆盖机制,选择逻辑最下方的（style标签里的）
3.行间式一定是逻辑最下方的样式

三、基本选择器

1、元素（标签）选择器

标签: 一般用于最内层样式修饰

p {color: "red";}

2、ID选择器

id:唯一标识的布局,不能重复

#i1 {

background-color: red;

}

#是指ID名

3、类选择器

类:使用范围最广,布局的主力军

.c1 {

font-size: 14px;

}

p.c1 {

color: red;

}　

注意：点是指类名字

样式类名不要用数字开头（有的浏览器不识别）。标签中的class属性如果有多个，要用空格分隔。

4、通用选择器

* {

color: white;

}

5、4个基础选择器优先级

通配 < 标签 < 类 < id (优先级:同一标签同一属性)

四、属性

1、颜色和长度

可以用color来设置颜色，

　　颜色属性被用来设置文字的颜色。

　　颜色是通过CSS最经常的指定：

- 　　十六进制值 - 如: ＃FF0000
- 　　　　一个RGB值 - 如: RGB(255,0,0)
- 　　颜色的名称 - 如: red

　　还有rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间

px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
* mm：毫米
* cm：厘米
* in：英寸
* pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
* em：相当长度，通常1em=16px，应用于流式布局

2、字体样式

font-family：字体族科，多值用于备用，以,隔开

```css
font-family: "STSong", "Arial";
```

3、文本样式

（1） color：文本颜色
（2） text-align：横向排列

left 居左 | center 居中 | right 居右

（3） vertical-align：纵向排列

baseline：将支持valign特性的对象的内容与基线对齐
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：将支持valign特性的对象的内容与对象顶端对齐
text-top：将支持valign特性的对象的文本与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐
bottom：将支持valign特性的对象的文本与对象底端对齐
text-bottom：将支持valign特性的对象的文本与对象顶端对齐

（4） text-indent：文本缩进
（5）text-decoration：文本划线

　　常用的为去掉a标签默认的自划线：

a {
  text-decoration: none;
}

（6） letter-spacing：字母间距

（7）word-spacing：单词间距
（8） word-break：自动换行

normal：默认换行规则
break-all：允许在单词内换行
4、背景样式

（1）背景颜色

background-color: red;

（2）背景图片

background-image: url('1.jpg');

（3）背景重复

repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺

5、边框样式

#i1 {
  border: 2px solid red;
}

除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

五。display

```css
.box {
/*block: 块级标签, 独占一行, 支持所有css样式*/
/*display: block;*/

/*inline: 内联(行级)标签, 同行显示, 不支持宽高*/
/*display: inline;*/

/*inline-block: 内联块标签, 同行显示, 支持所有css样式*/
display: inline-block;

/*标签的嵌套规则*/
/*①*/
/*block可以嵌套所有显示类型标签, div | h1~h6 | p*/
/*注: hn与p属于文本类型标签,所有一般只嵌套inline标签*/
/*②*/
/*inline标签只能嵌套inline标签, span | i | b | sup | sub | ins */
/*③*/
/*inline-block可以嵌套其他类型标签, 但不建议嵌套任意类型标签 img | input*/
}
```

display:"none"与visibility:hidden的区别：

visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

posted @ 2018-12-05 20:38 凌、云阅读(354) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

前端学习第55天 css三种引用、‘引用的优先级’、基本选择器、属性、display

公告