CSS（一）

最新推荐文章于 2024-03-07 14:08:27 发布

DF10F-0001A

最新推荐文章于 2024-03-07 14:08:27 发布

阅读量650

点赞数

分类专栏： Web 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_41819893/article/details/121106371

版权

Web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

一、CSS

1、基本语法

CSS 的定义由三部分构成:选择器(selector)、属性(properties)和属性的取值(value)。其基本语法是在选择器名称后加上{}大括号，在括号中设置属性和属性的取值，属性和属性值之间用冒号“:”隔开。

其基本语法如下。

选择器{
  	属性:属性值;
}    
即
selector{ 
	properties:value 
  }

选择器：选择器用来定义 CSS 样式名称
属性：属性是 CSS 中最重要的部分。常用的属性有字体属性、文本属性、背景属性、边界属性、边框属性和列表项目属性等。
属性值：属性值是 CSS 属性的基础，所有的属性都要涉及取值问题。

关于 CSS 的语法需要注意以下几点。

属性必须包含在{}中。
属性和属性值之间用“:”分隔。
当有多个属性时，用“;”进行区分。
在书写属性时，属性之间使用空格、换行等，并不影响属性的显示。
如果一个属性有几个值，则每个属性值之间用空格隔开。

2、CSS选择器

选择器是 CSS 很重要的概念，所有 HTML 语言中的标记都是通过不同的选择器进行控制的。用户通过给不同选择器赋予各种样式，从而对 HTML 标签进行控制，以实现各种效果。选择器的种类可以分为三种：标签选择器、类选择器和 ID 选择器。所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。

（1）、标签选择器

一个 HTML 页面由很多不同的标记组成，CSS 标记选择器用来声明哪些标记采用哪种CSS 样式。因此，每一种 HTML 标记的名称都可以作为相应的标记选择器的名称。例如，p 选择器就是用于声明页面中所有<p>标记的样式风格。同样，可以通过 hl 选择器来声明页面中所有的<h1>标记的 CSS 样式。语法：

标签名 {
	属性1：属性值1；
	属性2：属性值2； 
    属性3：属性值3； 
    ... 
}

优点：

能快速为页面中同类型的标签统一设置样式

缺点：

不能差异化样式，只能选择全部的当前标签

（2）、类选择器

网页设计者可以自己定一个类选择器，设置好属性和值后,在 XHTML 中应用。在 CSS中通过一个句点来标识类选择器，句点加上类名，后面 {} 大括号内书写属性和值。语法：

.类名 {
	属性1：属性值1：
	...
}

使用类的方法是在 HTML 中通过元素的 class="name"属性来引用。

<head>
    <style>
        .red {
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>

注意：

类选择器使用”.“进行标识，后面紧跟类名（自定义）
可以理解为给这个标签起了一个名字，来表示
长命称或词组可以使用中横线来为选择器命名
不要使用数字、中文，尽量使用英文来命名
命名要有意义

多类名

使用方式：

<div class="red font20">红色</div>

在标签class属性中写多个类名
多个类中间必须用空格分开

使用场景：

可以把一些标签元素相同的样式（共同的部分）放到一个类里面
这些标签都可以调用这个公共的类，然后再调用自己独有的类
节省CSS代码，统一修改

（3）、ID选择器

ID 选择器的使用方法跟类选择器基本相同，区别在于类选择器可以在页面中重复使用，而 ID 选择器在 XHTML 中只能使用一次。具体使用方法是在 CSS 中通过#来标识 ID选择器，语法是#加上 ID 名，后面{大括号内书写属性和值。语法：

#id名 {
	属性1：属性值1;
	..
}

应用 ID 的方法是以 id="类别名称"的形式引入到 XHTML,跟在元素的起始标签之后。前面定义了名为 A 的 ID，那应用到段落语句书写为

<p id-A>

注意，每个 ID 在一个页面上只能使用一次，所以 ID 应该留给每个页面上唯一的并只使用一次的元素，如果有多个地方需要使用同一个 CSS 规则，那就不应该使用 ID，可以使用类选择器或其他方法来提供样式。

<head>
    <style>
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">12345</div>
    <div id="pink">67890</div>
</body>

（4）、通用选择器

通用选择器使用星号（*）表示，匹配任何元素，它的定义对 HTML 文档中的每一个元素都会起作用。为了保证页面能够兼容多种浏览器，所以要对 HTML 内的所有标签进行重置，会将下面的代码加到 CSS 文件的最顶端。语法：

* {
	属性1：属性值1；
    ...
}

举例

<head>
    <style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <div>12345</div>
    <div>67890</div>
    <ul>
        <li>24680</li>
    </ul>
</body>

3、CSS字体属性

（1）、字体系列

CSS使用font-family属性定义文本的字体系列

<head>
    <style>
        h2 {
            font-family: '楷体';
        }
    </style>
</head>
<body>
    <h2>标题</h2>
    <p>测试测试测试测试</p>
    <p>测试测试测试测试</p>
    <p>测试测试测试测试</p>
</body>

各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空格隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示

（2）、字体大小

使用font-size属性定义字体大小

p {
	font-size:20px;
}

谷歌浏览器默认的文字大小是16px
不同浏览器默认显示的字号大小不一致，尽量给一个明确值大小，不要默认大小
可以给body指定整个页面文字的大小

<head>
    <style>
        h2 {
            font-size: 16px;
        }
    </style>
</head>
<body>
    <h2>标题</h2>
    <p>测试测试测试测试</p>
    <p>测试测试测试测试</p>
    <p>测试测试测试测试</p>
</body>

（3）、文字粗细

使用front-weight属性设置文字粗细，语法：

p {
	font-weight:bold;
}

属性：

normal	默认值
bold	定义粗体（加粗的）
100-900	400等同于normal，700等同于bold，注意数字后不跟单位

举例：

<head>
    <style>
        .bold {
            font-weight: 700;
        }
        h2 {
            font-weight: 400;
        }
    </style>
</head>
<body>
    <h2>标题</h2>
    <p>测试测试测试测试</p>
    <p>测试测试测试测试</p>
    <p class="bold">测试测试测试测试</p>
</body>

（4）、文字样式

使用font-style属性设置文本的风格

p { font-style:normal; }

属性值：

normal	默认值，浏览器会显示标准的字体样式
italic	浏览器会显示斜体的字体样式

举例：

<head>
    <style>
        p {
            font-style: italic;
        }
        em {
            font-style: normal;
        }
    </style>
</head>
<body>
    <p>测试测试测试测试</p>
    <em>测试测试测试测试</em>
</body>

（5）、字体复合属性

<head>
    <style>
        div {}
            font:italic 700 16px 'Courier New';
        }
    </style>
</head>
<body>
    <div>测试文本</div>
</body>

使用font属性时，必须按照顺序书写，不能更换顺序，同时各个属性之间以空格隔开
不需要设置的属性可以省略，但必须保留font-size和font-family属性，否则font属性将不起作用

4、文本属性

（1）、文本颜色

div {
	color:red;
}

（2）、对齐文本

div {
    /*text-align设置水平对其*/
	text-align:center;
}

left	左对齐（默认值）
right	右对齐
center	居中对齐

（3）、装饰文本

div {
	text-decoration:underline;
}

none	默认。没有装饰线
underline	下划线。链接a自带下划线
overline	上划线
line-through	删除线

（4）、文本缩进

div {
	text-indent:10px;
}

通过设置该属性，所有元素的第一行可以缩进一个给定的长度，甚至该长度可以是负值

div [
	text-indent:2em;
}

em是一个相对单位，就是当前元素（font-size）个文字的大小，如果当前元素没有设置大小，则会按照元素的1个文字大小

（5）、行间距

p { line-height:26px; }

5、Emmet语法

（1）、快速生成HTML结构语法

生成标签直接输入标签名按tab键即可比如 div 然后tab键，就可以生成＜div></div>
如果想要生成多个相同标签加上＊就可以了比如 div*3 就可以快速生成3个div
如果有父子级关系的标签，可以用＞比如 ul>li就可以了
如果有兄弟关系的标签，用＋就可以了比如div+p
如果生成带有类名或者id名字的，直接写．demo或者 #two tab键就可以了
如果生成的div类名是有顺序的，可以用自增符号＄
如果想要在生成的标签内部写内容可以用｛｝表示

6、多元素组合的选择器

多元素的组合选择器包括多元素选择器、后代元素选择器、子元素选择器和毗邻元素选择器。

（1）、多元素选择器

多元素选择器的语法格式如下：E,F。

多元素选择器同时匹配所有 E 元素或 F 元素，E 和 F 之间用逗号分隔。

例如：

h1,h2{color:blue;)

意思是 h1 和 h2 元素的颜色都设置为蓝色。

（2）、后代选择器

又称包含选择器，可以选择父元素里的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成了外层标签的后代。语法：

此语法表示选择元素1里面的所有元素2（hou'dai'yuan's）

元素1 元素2 {
	样式声明
}

举例：

<html>
<head>
    <style>
        ol li {
            color: red;
        }
    </style>
</head>
<body>
    <ol>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
        <li>我是ol 的孩子</li>
    </ol>
    <ul>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
        <li>我是ul 的孩子</li>
    </ul>
</body>
</html>

（3）、子元素选择器

子元素选择器只能选择作为某一元素的最近一级子元素。语法：

此语法表示选择元素1里面所有直接后代（子元素）元素2

元素1>元素2 {
	样式声明
}

举例

<html>
<head>
    <style>
        .nav > a {
            color: red;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">我是儿子</ a>
        <p>
            <a href="#">我是孙子</ a>
        </p>
    </div>
</body>
</html>

（4）、并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明

并集选择器是各选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法：

此语法表示选择元素1和元素2

元素1,元素2 {
	样式声明
}

注意：并集选择器为竖着写的形式，并且最后一个选择器不需要加逗号

举例

<html>
<head>
    <style>
        div,
        p {
            color: red;
        }
    </style>
</head>
<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>
</html>

（5）、伪类选择器

伪类选择器可以为某些选择器添加特殊的效果

伪类选择器书写的最大特点是冒号（:）书写

链接伪类选择器

a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接接
a:hover 选择鼠标指针位于其上的链接
a:activ 选择活动链接（鼠标按下未弹起的链接）

注意：为了确保生效，必须按照LVHA的顺序来声明

<head>
    <style>
        a:link {
            color: #333;
            text-decoration: red;
        }
        a:visited {
            color: seagreen;
        }
        a:hover {
            color: sienna;
        }
        a:active {
            color: slateblue;
        }
    </style>
</head>
<body>
    <a href="#">小猪佩奇</ a>
</body>
</html>

:focus伪类选择器

用于选取获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取，语法：

input:focus {
	background-color:yellow;
}

举例：

<head>
    <style>
        input:focus {
            background-color: pink;
        }
    </style>
</head>
<body>
</body>
<input type="text">
<input type="text">
<input type="text">
</html>

7、元素显示模式

（1）、块元素

特点：

块元素独占一行
高度、宽度、外边距以及内边框都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素

注意：

文字类元素内不能使用块级元素
<p>标签和<h1>~<h6>标签主要用于存放文字，不能存放块级元素

（2）、行内元素（内联元素）

特点：

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

注意：

链接内不能再放链接
特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全

（3）、行内块元素

特点：

和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，一行可以显示多个（行内元素特点）
默认宽度就是他本身内容的宽度（行内元素特点）
高度、行高、外边距和内边距都可以控制（块级元素特点）

（4）、元素显示模式转换

转换为行内元素：

display:inlinne;

转换为块级元素：

display:block;

转换为行内块：

display:inline-block;

8、CSS的背景

（1）、背景颜色

background-color属性定义了元素的背景颜色

background-color：颜色值

一般情况下背景颜色默认值是transparent（透明），也可以手动指定背景颜色为透明色

（2）、背景图片

background-image属性描述了元素的背景图像

background-image:one | url(url)

参数值：

none	无背景图（默认的）
url	使用绝对或相对地址指定图像

（3）、背景平铺

如果需要在HTML页面上对背景图像进行平铺，可以使用backgrou-repeat属性

background-repeat:repeat | no-repeat | repeat-x | repeat-y

（4）、背景位置

利用background-position属性可以改变图片在背景中的位置

background-position:x y;

参数值：

length	百分数 \| 由浮点数字和单位标识符组成的长度值
position	top \| center \| bottom \| left \| center \| right 方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关
如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐
如果参数值是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中

（5）、背景固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动

background-attachment:scroll | fixed

属性值：

scroll	背景图像是随着对象内容滚动
fixed	背景内容固定

（6）、背景半透明色

background:rgba(0,0,0,0.3);

注意：

最后一个参数是alpha透明度，取值范围在0-1之间
背景半透明指的是盒子背景半透明，盒子里面的内容不受到影响

（7）、背景复合写法

background:背景颜色背景图片地址背景平铺背景图像滚动背景图片位置

background:transparent url(image.jpg) repeat-y fixed top;

9、CSS特性

（1）、层叠关系

层叠性原则：

样式冲突，遵循就近原则，样式离哪个结构近就执行哪个样式
样式不冲突，不会重叠

（2）、继承关系

CSS 的一个主要特征就是继承，它是依赖于祖先一后代关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。换句话说，继承是指设置上级（父级）的 CSS 样式，上级（父级）及以下的上级（子级）都具有此属性。

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

样式定义：

body{color:blue;}

应用举例：

    <p>关于 css 的<strong>继承特性</strong>深入学习</p>

继承的局限性：

继承是 CSS 重要的一部分，我们甚至不用去考虑它为什么能够这样，但 CSS 继承也是有限制的，有一些属性不能被继承，如 border、margin、padding、background 等

样式定义定义：

div {border:1px solid #00F;}

代码如下：

<div>我是<strong>border</stzong>我不能被继承</div>

（3）、优先级

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行

注意：

权重是由4组数字组成的，但不会有进位
类选择器永远大于元素选择器，id选择器永远大于类选择器
等级判断从左向右，如果某一位数值相同，则判断下一位数值
继承的权重是0

权重叠加：如果是复合选择器，则会有权重叠加，需要计算重叠加，需要计算

DF10F-0001A

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS（一）

一、CSS1、基本语法CSS 的定义由三部分构成:选择器(selector)、属性(properties)和属性的取值(value)。其基本语法是在选择器名称后加上{}大括号，在括号中设置属性和属性的取值，属性和属性值之间用冒号“:”隔开。其基本语法如下。选择器{ 属性:属性值;} 即selector{ properties:value } 选择器：选择器用来定义 CSS 样式名称属性：属性是 CSS 中最重要的部分。常用的属性有字体属性、文本...
复制链接

扫一扫