day043 前端之CSS引入方式、选择器、相关属性

最新推荐文章于 2024-04-10 14:12:14 发布

weixin_30702887

最新推荐文章于 2024-04-10 14:12:14 发布

阅读量207

点赞数

文章标签：前端嵌入式 ViewUI

原文链接：http://www.cnblogs.com/yipianshuying/p/10126020.html

版权

本节内容：

1、css介绍及语法
2、css的几种引入方式
3、css选择器（如何找到对应的标签）
4、css相关属性

一、css介绍及语法

1、css介绍

层叠样式表
CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素，
给HTML设置样式，让它更加美观。

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

2、css语法

每个CSS样式由两个组成部分：选择器和声明。
声明又包括属性和属性值。每个声明之后用分号结束。
/*这是注释*/

二、css的几种引入方式

1、行内样式

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

不要大规模使用。

<p style="color: red">Hello world.</p>

2、内部样式

在html文件的<head></head>标签对内，新建标签对中，
嵌入式是将CSS样式集中写html中，
格式如下：

<head>
    <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>

3、外部样式（推荐使用）

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

1、html里写的引入文件语句

<link href="mystyle.css" rel="stylesheet" type="text/css"/> #现在写的这个.css文件是和你的html是一个目录下，如果不是一个目录， href里面记得写上这个.css文件的路径

2、css文件的内容格式：

p {color:blue;} /*注释*/ 注释一般都使用来描述后面这段css代码是给页面上哪一个板块用的 /*标题样式*/ xxxxx /*个人中心设置*/

三、CSS选择器（如何找到对应的标签）

1、基本选择器

1、元素选择器（标签名）

选择了这个元素（标签名），那么该标签中的所有的文字或内容都会一起被修改。
p {color: "red";}

2、ID选择器

# id1{   #号加id属性，后面的id1就是id属性的值
 background-color: red;  #背景色
 color:red;  # 是字体颜色  文章下面再具体介绍
}

id不能重复，给多个p标签同时添加一个css样式该怎么办？
看下面的类选择器

3、类选择器

.c1 {  .表示class属性，c1表示class的值
font-size: 14px;
}

p.c1 {  找到所有p标签里面含有class属性的值为c1的p标签，注意他俩之间没有空格昂
color: red;
}

注意：
样式类名不要用数字开头（有的浏览器不认）。

标签中的class属性如果有多个，要用空格分隔。

4、通用选择器

* {  *表示所有的标签
  color: white;
}

2、组合选择器（重点）

1、后代选择器（子子孙孙，该标签中的所有都生效）

后面所有的都会被影响

/*li（标签名）内部的a标签设置字体颜色*/
li a {
  color: green;
}

2、儿子选择器（只找儿子，该标签内的）

仅对该标签内的生效，

/* 选择所有父级是 <div> 元素的 <p> 元素 */
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

4、毗邻选择器（紧跟其后的第一个）

/*选择所有紧接着<div>元素之后的<p>元素*/
    div+p {
      margin: 5px; }

5、弟弟选择器(其后(不含本身)的所有兄弟标签(同级标签)，被选中)

/*i1（id值）内所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

3、属性选择器（不常用简单了解）

通过属性或者属性的值来查找，这个属性是我们自己定义的，
不是id啊class啊html自带的属性

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}

/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

<div title="p1">hello</div>

1、还有下面这些不太常用的，正则的写法，属性值以什么开头，以什么结尾等

/*找到所有title属性以hello开头的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title属性以hello结尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title属性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素：*/
[title~="hello"] {
  color: green;
}

4、分组和嵌套

1、分组（多个选择器用逗号分隔）

当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，
我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如：
div, p {
  color: red;
}

通常，我们会分两行来写，更清晰:
div, #如果你这样写，千万别忘了逗号，不然就成了div下的子子孙孙里面找p标签
p {
  color: red;
}

2、嵌套（多种选择器混合起来用）

多种选择器可以混合起来使用，
比如：.c1类内部所有p标签设置字体颜色为红色。

.c1 p {
  color: red;
}

5、伪类选择器（比较特殊，CSS3版本新加的特性）

可以根据标签的不同状态再进行进一步的区分，比如一个a标签，点击前，点击时，点击后有不同的三个状态。

/* 未访问的链接 */
a:link {
  color: #FF0000 } /* 已访问的链接 */ a:visited { color: #00FF00 } /* 鼠标移动到链接上 */ 这个用的比较多 a:hover { color: #FF00FF } /* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色 a:active { color: #0000FF } /*input输入框获取焦点时样式*/ input:focus { #input默认的有个样式，鼠标点进去的时候，input框会变浅蓝色的那么个感觉 #outline: none; background-color: #eee; #框里面的背景色 }

6、伪元素选择器（通过css来造标签，不推荐）

这些前后添加的文本内容在页面上是无法选中的，正常的标签或者文字是可以选中的。

before和after多用于清除浮动。后面讲

1、first-letter（设置首字母、首字的样式）

#将p标签中的文本的第一个字变颜色变大小
p:first-letter {
  font-size: 48px;
  color: red;
}

2、before(在整个的前面，不是里面的前面）

/*在每个<p>元素之前插入内容*/
p:before {
    content:"*"; color:red; }

3、after（在整个的后面，不是里面的后面）

/*在每个<p>元素之后插入内容*/
p:after {
    content:"[?]"; color:blue; }

7、选择器的优先级（小难点）

优先级通过权重来确定，权重在html中已经规定好，记住就行

1、首先来看一下css继承

继承是css的一个主要特征，是一种机制，就是默认它的后代会自带它的属性。

此外，继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。
有一些属性不能被继承，如：border, margin, padding, background等（这些相当于局部作用域）。

例如一个body定义了的字体颜色值也会应用到段落的文本中。

 例如一个body定义了的字体颜色值也会应用到段落的文本中。
body {
  color: red; } 我们只要给对应的标签设置字体颜色就可覆盖掉它继承的样式。 p { color: green; }

2、选择器的优先级

其实是按照不同选择器的权重来决定的，具体的选择器权重计算方式如下图：
注：内联样式的意思是把css样式写在标签里面：

权重的计算，永不进位
我们看上面知道class的权重是10，但是即便是11个class相加起来大于id的100权重，也还是id生效，
也就是说，不会进位，class组合起来也无法超过id的权重

除此之外还可以通过添加 !important方式来强制让样式生效,万不得已不要用

四、css相关属性

1、宽和高（文本框的大小）

width属性可以为元素设置宽度。

height属性可以为元素设置高度。

块级标签才能设置宽度，内联标签的宽度由内容来决定。

2、字体属性（文字大小、粗细）

1、文字字体(楷体)

font-family可以把多个字体名称作为一个“回退”系统来保存。

写多个字体，浏览器会按顺序去使用它可以识别的第一个字体。

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif }

2、字体大小（font-size,页面默认16px）

font-size:字体大小;
如果设置成inherit表示继承父元素的字体大小值。

p {
  font-size: 14px; }

3、字重（font-weight,字的粗细程度）

font-weight用来设置字体的字重（粗细）。

3、文本颜色（color:red,设置文字颜色）

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

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

1.十六进制值 - 如: ＃FF0000
#前两位是表示红，中间两位表示绿，后面两位表示蓝，F是最高级别，0表示最低级别（无色）

2.一个RGB值 - 如: RGB(255,0,0)
#红绿蓝就是RGB的意思，第一个参数是红，最高255，最低0

3.颜色的名称 - 如:  red

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

4、文字属性（对齐方式、文字划线）

1、文字对齐（text-align）

text-align 属性规定元素中的文本的水平对齐方式。
fe：
text-align:left;

2、文字装饰（text-decoration，加删除线，下划线）

text-decoration 属性用来给文字添加特殊效果。

fe:去掉a标签默认的自划线：

a {
  text-decoration: none; }

3、首行缩进（text-indent）

将段落的第一行缩进 32像素：

p {
  text-indent: 32px; #首行缩进两个字符，因为我记得一个字在页面上的默认大小为16px }

5、背景属性（颜色、图片、布置方式）

单独写每一条属性，也可以合起来简写
background:#ffffff url('1.png') no-repeat right top;

/*背景颜色*/
background-color: red; /*背景图片*/ background-image: url('1.jpg'); # 1、url里面是图片路径，如果和你的html文件在一个目录下，使用这种相对路径就行了，来个葫芦娃图片试一下 # 2、用图片链接也可以 # 3、不推荐绝对路径，可能存在问题，如：浏览器不能识别 background-repeat: no-repeat; # 默认平铺，这里设置不平铺 /* 背景重复 repeat(默认):背景图片沿着x轴和y轴重复平铺，铺满整个包裹它的标签 repeat-x：背景图片只在水平方向上平铺 repeat-y：背景图片只在垂直方向上平铺 no-repeat：背景图片不平铺 */ /*背景位置*/ background-position: right top; # 九宫格的位置 /*background-position: 200px 200px;*/ 图片距离左、上边界的距离 #以前大家都用雪碧图，就是将很多的网页上需要的小图片组合成一个大图， 用这个图中哪个位置的小图片，就通过这个参数来调整， 看下面的示例操作，现在很少用这个了

fe:鼠标滚动但是背景不动，很多电商都在这么搞(类似回到顶部的锚点)

固定显示背景图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滚动背景图示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;  #凡是这种使用百分比的，都是按照你父标签的宽度的百分之多少来显示
            height: 500px;
            background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center;
            #这个图片好像没有了，自己找一个网上的图片，把这个url路径换一下，可以到摄图网去看看，国内免费的一个图片网站

            background-attachment: fixed;  #就是这个属性，让你的背景图片固定住的意思，attachment是附属、依附的意思
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

6、边框（文本框的边框属性，线型、大小、颜色）

1.border-width  宽度

2.border-style   样式

3.border-color   颜色

单独每一项的写法：
#i1 {
  border-width: 2px; border-style: solid; border-color: red; } 常用的简写写法： #i1 { border: 2px solid red; }

1、边框样式（线型的说明）

除了可以统一设置边框外还可以单独为某一个边框设置样式

#i1 {
  border-top-style:dotted; # 单独设置上边框 border-top-color: red; border-right-style:solid; border-bottom-style:dotted; border-left-style:none; }

7、border-radius（实现圆角边框，做圆形头像用的）

用这个属性能实现圆角边框的效果。

边框的长和宽相等时，
将border-radius设置为长或高的一半即可得到一个圆形。

边框的长和宽不相等时，
否则就是一个椭圆。

1、在调试窗口调整颜色来测试

（调试窗口：页面上右键--检查，或者f12）
调整好之后，把调整后的值复制到我们的css属性里面就行了

2、通过hover来设置鼠标移动上去变颜色：

你会看到之前的background-color有了一个横线，这是不生效的效果，
因为你查看的hover的样式，还可以看到class
把对勾去了，这个class的样式就不显示了

8、修改当前网页的内容，仅对本页面生效（就自己看的，刷新无效）

不用ps就能够改了：注意昂，只能改当前页面的显示内容，改不了真实的值，
并且页面一刷新，这个指令就失效了，需要重新输入

9、display（块级标签变内联标签，相互转换）

用于控制HTML元素的显示效果。
是块级标签显示，还是内联标签，
或者占位置显示，还是不占位置显示。

1、display:”none”与visibility:hidden的区别：（都是隐藏元素）

display:none; 隐藏某个元素，并且不占用该元素原先的空间，
（记忆：短的none，就是彻底隐藏）

visibility:hidden; 隐藏某个元素，但还占用着元素未隐藏之前的空间，
（记忆：长的，虽然看不见，但还占着位置）