CSS语法规范,选择器,修改字体和文本属性的方法,CSS的引入方式及三大特性

最新推荐文章于 2023-03-03 23:27:39 发布

KeeeepReal

最新推荐文章于 2023-03-03 23:27:39 发布

阅读量532

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/KeeeepReal/article/details/119918512

版权

1.CSS语法规范

CSS(层叠样式表)
一般在<head>标签内创建<style>标签在其内编辑CSS
CSS规则主要由选择器和声明构成
给谁改样式 {改什么样式(属性:属性值;)}

2.选择器

2.1基础选择器

2.1.1标签选择器

以HTML标签为选择器
将整个标签更改样式

2.1.2类选择器

以类划分给所有类修改样式
以 .类名为修改器

<head>
    <style>
        .pink {color: pink;
        font-size: 30px;      
        }
    </style>
</head>
<body>
    <p class="pink">a</p>
    <p>b</p>
    <p class="pink">c</p>
</body>

可以给标签起多个类名类名间用空格隔开

2.1.3id选择器

以id划分 #id名为选择器
id具有唯一性和确定性只能调用一次相同id

<head>
    <style>
        #pink {color: pink;
        font-size: 30px;      
        }
    </style>
</head>
<body>
    <p id="pink">a</p>
    <p>b</p>
</body>

2.1.4通配符选择器

选取页面里所有元素

* {color="pink";}

2.2复合选择器

2.2.1后代选择器

ul li {color: red}
选择ul中所有li标签
可以选择跨越多级如ul il p {}

2.2.2子选择器

ul>li {}
选择ul中最近一级了li标签
只能选择最近一级的子元素

2.2.3并集选择器

div, p {}
将div和p改为同样样式
将两个不同标签改为相同样式

2.2.4链接伪类选择器

选择器的选择:
在这里插入图片描述
为确保可以正常生效要按照上图顺序声明样式
链接在浏览器中具有默认样式,所以需要给链接单独指定样式

2.2.5:focus伪类选择器

修改被光标选中的表单元素样式,不被选中就恢复原样
input:focus {}

3.CSS字体属性

3.1改变字体 font-family

body {font-family: ‘微软雅黑’;}
可输入多个字体若第一个字体系统没有则使用第二个

3.2改变字号 font-size

p {font-size: 20px;}

3.3改变字号粗细 font-weight

p {font-weight: 700;}

3.4文字样式 font-style

p {font-style: italic;}
斜体

3.5复合属性写法

font: {font-style font-weight font-size/line-height font-family;}
p {font: normal 700 20px 微软雅黑;}
顺序不能颠倒不需要设置的属性可不设置保留默认值但size和family属性不能省略

4.文本属性

4.1字体颜色 color

color
三种方式:

p {		color: red;
        color: #ff0000;
        color: rgb(255, 0, 0);
        }

4.2对齐文本 text-align

text-align
设置水平对齐方式
p {text-align: center/left/right}
使文本居中/靠左/靠右对齐

对行内元素或行内块元素使用时,需将词属性添加给其父类块元素中

4.3文本装饰 text-decoration

text-decoration
在这里插入图片描述

4.4文本缩进 text-indent

text-indent 用来指定文本第一行的缩进
p {text-indent: 2em} 首行缩进2字符

4.5行高 line-height

line-height 设置行与行的距离
行高包括文字上下间距和文字本身高度
p {line-height: 26px}
若行高不带单位,如1.5.则意为行高为字体大小的1.5倍.

5.CSS的引入方式

5.1内部样式表

将CSS写到HTML页面内部,放入style标签内.

5.2行内样式表

在标签内部的style属性设定CSS样式,适用于修改简单样式

5.3外部样式表

样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用
创建后缀名为css的文件,如style.css 在其内敲入样式
在HTML页面的head标签内输入 <link rel="stylesheet" href="style.css">即可在HTML页面中使用外部css样式

6.CSS三大特性

6.1层叠性

当样式冲突时,遵循就近原则.执行离结构近的样式.
样式不冲突时,不层叠.

6.2继承性

子元素可以继承父类元素的一些样式(text-, font-, line-, color)

6.3优先级

样式后写!important(正无穷) > 行内样式 style=" "(1,0,0,0) > id(0,1,0,0) > 类和伪类(0,0,1,0) > 标签选择器(0,0,0,1) > 继承或*(通配符选择器)(0,0,0,0)
继承的权重是0,不管父类权重多高,继承的子类得到权重依然为0

复合选择器会有权重叠加问题
ul li 权重为(0,0,0,2) 永远不会进位
.nav li 权重为(0,0,1,1)