csss收获（1）

最新推荐文章于 2024-07-14 12:36:02 发布

续航，#序章

最新推荐文章于 2024-07-14 12:36:02 发布

阅读量182

点赞数 2

文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_63260581/article/details/121171330

版权

一，CSS基础语法

CSS规则由两个主要的部分构成:选择器，以及一条或多条声明，选择器是你要改变样式的HTML元素，每条声明由属性和值构成，属性和值用冒号分开；若值为若干单词，则需要用引号括住

二，CSS基础选择器简介

（1）类选择器：类选择器选择有特定属性的HTML元素，例如.red {color:red;}

（2）ID选择器: id选择器的格式如下，#属性名 { } <p id ="属性名"> </p>

id 选择器在HTML文件中只能使用一次

（3）标签选择器：选择HTML文件中所有的一类标签

（4）通配符选择器: 格式 *{ } 可以给所有的标签都修改样式

（5）多类名选择器：多个类名用空格隔开例如 p h1 td { }

三，CSS字体属性

（1）font-family设置字体:

font-family属性设置字体风格，各个字体间用，隔开

（2）font-size字体大小:

font-size属性设置字体的大小（一定要跟上单位px）

（3）font-weight字体粗细:

font-weight属性设置字体的粗细。使用bold可将字体设置为粗体；其中400等价于normal,700等价为bold

（4）font-style字体风格：

该属性有两个值 normal——字体正常显示；

italic——字体倾斜显示

注： font还有一种复合属性写法，格式为例如，

body {font:font-size font-weight font-size/line-height font-family}

这种可以把以上字体属性综合来写，节约空间，但要注意必须要按照上面格式来写不能颠倒顺序，各个属性必须靠空格隔开，且必须保留font-size和font-family属性。

四，CSS文本属性

（1）文本颜色；color属性用于定义文本的颜色

（2）文本对齐：text-align 文本内容的水平对齐方式，值有center，right，left

(3) 文本装饰：text-decoratiom 值有：none （无） underline（下划线）

overline（上划线） line-through（删除线）

（4）文本缩进：text-indent 常用值为2 em 使文本首行缩进2个空格的距离

line-height 行高为上间距，文本高度和下间距

五，CSS引入方式

CSS有三种引入方式：（1）行内样式表修改样式比较简单，放在表签之中

（2）内部样式表 <style> </style> 放在</head>前

（3）外部样式表 1.新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中 2.在HTML页面中使用<link>标签引入这个文件如

六，CSS复合选择器

（1）后代选择器例如元素1 元素2 { } 元素1和元素2用空格隔开，元素2必须是元素1的孩子

（2）子元素选择器（亲儿子选择器）例如 .nav>a { }

元素2必须是元素1的亲儿子

（3）并集选择器 1,格式:
选择器1,选择器2,...{
属性:值;
}
2,注意点:
选择器之间利用,连接；
选择器可以是标签名称,也可以是id、class名称。

（4）伪类选择器（用于向某些选择器添加特殊的效果）

1.a:link 选择所有未被访问的链接

2.a:visited 选择所有已被访问的链接

3 a:hover 选择鼠标指针位于其上的链接
4.a.active 选择活动链接

5.focus 伪类选择器用于获取获得焦点的表单元素，专对input标签，格式为

input：focus { } 如

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

input:focus { background-color: brown; color: coral;}

</style>

</head>

<body>

</body>

</html>

注：单行文字垂直居中的原理，让行高等于盒子的高

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style>
       /* 1.标签选择器和类选择器合起来使用----复合选择器 */
       h1.aaa{
           color:red;
       }
       /* 1.标签选择器和ID选择器合起来使用----复合选择器 */
       p#bbb{
           color:blue;
       }
       /* 2.组合选择器 */
       h1,p,div,span,.ccc{
           font-size:30px;
       }
       div{
           background:violet;
       }
       .ccc{
           font-weight:bold;
       }
       /* 3.嵌套选择器 */
       /* div p{
           color:green;
           text-decoration:underline;
       } */
       div>p{
           color:green;
           text-decoration:underline;
       }
       div h3.ddd{
           color:red;
       }
   </style>
</head>
<body>
   
   <h1 class="aaa">welcome</h1>
   <h4 class="aaa">css</h4>
   <h1>hello</h1>
   <hr>
   
   <p id="bbb">world</p >
   <p>html</p>
   <h1 id="bbb">主讲：叽叽</h1>
   <hr>
   
   <h1>hello</h1>
   <p>CSS</p>
   <div>WEB开发</div>
   <span class="ccc">JAVA开发</span>
   <hr>
   
   <div>
       <p>div内部的p标签</p>
       <h3>div内部的h3标签</h3>
   </div>
   <hr>
   <div>
       <h3>
           <p>div内部的h3内部的p标签</p>
       </h3>
   </div>
   <hr>
   
   <div>
       <p>div内部的p</p>
       <h3 class="ddd">div内部的h3</h3>
       <p class="ddd">PPPP</p>
   </div>
   <h3 class="ddd">h3h3h3</h3>
</body>
</html>

七，CSS的背景

（1）背景颜色 background-color：transparent（透明的）

（2）背景图片 background-image：url（）；

（3）背景平铺 background-repeat：repeat平铺 no-repeat不平铺

repeat-x 向x方向平铺 repeat-y 向y方向平铺

（4）背景位置 background-position：x y

注 x和y可以是方位名词（center left right）还可以是精确单位；若x,y是方位名词，则顺序可以颠倒；若只有一个方位名词，则另一个默认为center 。

（5）背景图像固定：background-attachment fixed（固定） scroll（滚动）

注：复合写法 background：（后面的几个属性顺序可颠倒）

（6）背景透明化： background：rgba (0,0,0,a) a代表透明度，取值在0--1之间

八，CSS元素显示模式

HTML有块元素和行内元素

行内元素：特点：1相邻行内元素在一行，一行可以显示多个 2高度，宽度直接设置是无效的 3默认高度就是它本身的内容的高度 4行内元素只能容纳文本或其他行内元素

块元素：特点：一行可以显示多个；默认宽度就是它本身内容的宽度；高度，行高，外边距都可以

控制

行内块元素：

　行内块状元素特征：(1)不自动换行

　　　　　　　　　　　(2)能够识别宽高

　　　　　　　　　　　(3)默认排列方式为从左到右

元素显示模式转化

转化为块元素：display：block

转化为行内元素：display：inline

转化为行内块元素：display：inline-block

九，CSS三大特性

1. 层叠性：

层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。
比如：先给div设置背景颜色为红色，然后设置背景颜色为粉红色，那么最终颜色可能为红色，也可能为粉红色（明显的两种颜色设置不能并立，所以只为其一，这里没给出确定答案是因为还要考虑“优先级”）

层叠性主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。【这里要注意只覆盖同样的不可重复的样式属性，不会覆盖不重复的属性，不重复的属性会合并下来。

2.继承性：

继承性是指当子标签没有设置样式时，会继承父标签的样式。
比如一个子标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。

可继承的属性比如有字体类属性（字体颜色（color）、字体大小（font-size）之类的）、文本类属性（行高（line-height）之类的）、背景类属性（背景颜色（background-color）之类的）（要注意子标签不会继承父标签的宽度、高度、边距属性。

3.优先级：

优先级：!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承【优先级高的规则会忽视层叠性，忽视就近原则来定义样式。比如定义了!important，即使行内样式离得近，最终生效的还是!important标注的属性】
例如权重通配符选择器继承（0,0,0，0）标签选择器（0,0,0,1）类选择器（0,0,1,0） ID选择器（0,1,0，0，） style选择器（1,0,0,0,）！important无穷大

注：权重相同时，就近原则；权重不同时，权重大的生效

续航，#序章

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
csss收获（1）

一，CSS选择器简介（1）类选择器（2）ID选择器（3）标签选择器（4）通配符选择器二，CSS字体属性（1）font-family设置字体: font-family属性设置字体风格（2）font-size字体大小: font-size属性设置字体的大小（一定要跟上单位px）（3）font-weight字体粗细: f...
复制链接

扫一扫