CSS基本语法和常用属性

- 一、CSS
- 二、CSS基本语法
- 三、CSS的三种形式
- - 1、行内样式
  - 2、内部样式
  - 3、外部样式
  - 4、三者的优先级问题
  - 5、代码演示
- 四、选择器
- - 1 基础选择器
  - - 1.1标签选择器
    - 1.2 ID选择器
    - 1.3 Class选择器
    - 1.4 属性选择器
  - 2. 组合选择器
  - - 2.1 层次选择器
    - 4.2.2 并列选择器
  - 3. 伪类选择器
  - 4、选择器的优先级
- 五、CSS常用属性
- - 1、尺寸
  - 2、文本
  - 3、颜色取值
  - 4、背景

一、CSS

层叠样式表。（相互叠加一层层的）

CSS作用：通过CSS属性，设置HTML元素的显示样式。

二、CSS基本语法

选择器 {属性: 值;属性: 值;
}
1） 选择器：选中HTML页面中的指定标签元素。2） 属性：不同的属性用于设置不同的显示方式。3） 值：给属性设置的值。

三、CSS的三种形式

1、行内样式

在HTML标签上，使用style属性设置当前标签的CSS样式。

css"><标签名 style="属性:值; 属性:值;"></标签名>

例如

css"><h1 style="color:red; background-color: green">行内样式</h1>

行内样式不需要选择器，样式只对当前的标签有效。

2、内部样式

内部标签是指在HTML的内部

将CSS样式写在style标签中。style标签一般写在head标签中。

css"><style>
选择器 {属性: 值;属性: 值;
}
</style>

内部样式针对当前页面所有符合选择器的标签都有效。

补充注释：

Html的注释：Ctrl+? <!---->
CSS的注释：/* */

3、外部样式

单独写在CSS文件中的样式，CSS文件都是以.css作为后缀的文件。通常放在项目下的CSS文件夹下，名字一般与html的名字相同（对应）。
，
在需要使用的HTML页面中，需要使用link标签引入CSS文件。一般link写在
style标签的前面，如果没有style标签，一般写在head标签里面的最后一个。

css"><link rel="stylesheet" href="css/css.css">

外部样式在所有引入的页面中，都有效。

一般情况使用外部样式，CSS代码与HTML分离，实现CSS代码复用。

4、三者的优先级问题

行内样式的优先级最高！

就近原则！！！离标签越近的优先生效！

5、代码演示

index.html代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>这是我的web页面</title><!-- 引入外部样式 --><link rel="stylesheet" href="css/index.css"><!-- 内部样式: --><style>css">/* 编写CSS */h1{text-decoration: underline;}h2{text-decoration:line-through;}</style></head><body><!-- 行内样式 --><h1 style="css language-css">color:green;background-color: yellow;">标题一</h1><h1>第二个一级标题</h1><h2>二级标题</h2></body>
</html>

index.css代码：

css">/* h2文字设置成红色 */
h2{color: red;
}

显示结果：

在这里插入图片描述

四、选择器

选择器的作用：选取HTML标签

1 基础选择器

1.1标签选择器

使用HTML的标签名作为选择器。

HTML标签名 {}

1.2 ID选择器

id是HTML标签常用属性，所有的标签都可以设置id属性，在一个页面中id的值不应该相同。

使用HTML标签的id属性值作为选择器。

#ID值{}

使用举例：
在这里插入图片描述

1.3 Class选择器

使用HTML标签的class属性值作为选择器。

.Class值{}

class选择器是最常用的选择器。

与id类似，HTML的标签都可以设置class属性，在一个页面中允许多个元素拥有相同的class值，也允许一个元素拥有多个class值。

<标签名 class="值1 值2 值3..."></标签名>

在这里插入图片描述

1.4 属性选择器

根据HTML标签的属性筛选元素。

[属性名]{}     选择拥有指定属性的元素[属性名='值']{}  选择属性值为指定值的元素

在这里插入图片描述

主要针对表单元素input进行样式的设置。
在这里插入图片描述

2. 组合选择器

2.1 层次选择器

根据元素与元素之间的关系进行选择。

1）祖孙选择器

祖先选择器 子孙选择器{}

先选取祖先元素，在祖先的内部再使用子孙选择器选择元素。

代码示例+效果:

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 祖孙选择器：只能选中上面的 --><style>css">div li{color:red}body ul{/* 两个都能选中 */border: 5px solid blue;}</style></head><body><div><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><ul><li>A</li><li>B</li><li>C</li><li>D</li></ul></body>
</html>

div li { color: red; }：这个选择器选中了 <div> 标签下的所有 <li> 元素并将其颜色改为红色，因此 1, 2, 3, 4 会变成红色。
第一组 <ul> (位于 <div> 标签内)：
列表项 1, 2, 3, 4 会显示为红色，整个列表会有蓝色的边框。第二组 <ul> (位于 <body> 标签内)：
列表项 A, B, C, D 显示为默认颜色，且也会有蓝色的边框。

在这里插入图片描述

2）父子选择器

父选择器>子选择器{}

先选取父元素，再从父元素中选择直接子元素。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 祖孙选择器：只能选中上面的 --><style>css">div li{color:red}body ul{/* 两个ul都能选中(因为符合祖孙关系)*/border: 5px solid blue;}/* 父子选择器 */body>ul{background-color: yellow;}</style></head><body><div><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><ul><li>A</li><li>B</li><li>C</li><li>D</li></ul></body>
</html>

在这里插入图片描述

3）兄弟选择器

兄选择器~弟选择器{}
兄选择器+弟选择器{}

~只会选中所有兄元素后面的弟弟元素。

+只会选中哥哥元素紧挨着的弟弟元素。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 祖孙选择器：只能选中上面的 --><style>css">div li{color:red}body ul{/* 两个ul都能选中(因为符合祖孙关系)*/border: 5px solid blue;}/* 父子选择器 */body>ul{background-color: yellow;}/* 兄弟选择器：~兄；+弟 */.sh~li{font-size: 40px;}.sh+li{font-weight: bold;}</style></head><body><div><ul><li>1</li><li class="sh">2</li><a>妹妹</a><li>3</li><li>4</li></ul></div><ul><li>A</li><li>B</li><li>C</li><li>D</li></ul></body>
</html>

在这里插入图片描述

4.2.2 并列选择器

第一种：是或的关系满足其中一个也行，它的作用是选择多个元素，并对它们应用相同的样式。

选择器,选择器{}

第二种：且的关系，必须同时满足条件才能设置成对应的效果：

选择器选择器{}

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 祖孙选择器：只能选中上面的 --><style>div li{color:red}body ul{/* 两个ul都能选中(因为符合祖孙关系)*/border: 5px solid blue;}/* 父子选择器 */body>ul{background-color: yellow;}/* 兄弟选择器：~兄；+弟 */.sh~li{font-size: 40px;}.sh+li{font-weight: bold;}/* 并列选择器 */li,a{color:yellow;}/* 且的关系的并列选择器 */ul.a{border-radius: 30px;}</style></head><body><div><ul class="a"><li>1</li><li class="sh">2</li><a>妹妹</a><li>3</li><li>4</li></ul></div><ul class="b"><li>A</li><li>B</li><li>C</li><li>D</li></ul></body>
</html>

3. 伪类选择器

4、选择器的优先级

越精确越优先！

ID > Class=属性 > 标签

同等级别选择，层次选择器的优先级会更高。

五、CSS常用属性

1、尺寸

width：固定宽度height：固定高度max-width：最大宽度max-height：最大高度min-width：最小宽度min-height：最小高度

所有的inline（行内元素）元素是无法设置宽高的

取值：像素值，百分比。

2、文本

color：字体颜色font-size：字体大小，取值：像素值。font-weight：粗细，取值：100~800、bold。font-famliy：字体类型，取值：宋体、楷体、黑体等。text-align：对齐方式，取值：left、center、right。text-decration：字体修饰线

3、颜色取值

1） 颜色名： red、green、blue、yellow等。2） 十六进制颜色值： #RGB、#RGBA、#RRGGBB、#RRGGBBAA。R：红色
G：绿色
B：蓝色
A：透明度3） 颜色函数：rgb(R, G, B)、rgba(R, G, B, A)。R、G、B：十进制颜色值，取值0~255整数。A：透明度，取值：0~1的小数，0表示完全透明，1表示完全不透明。

4、背景

background-color：背景颜色background-image：背景图片，取值：url(图片地址)background-repeat：重复，取值：repeat（重复）、repeat-x（水平方向重复）、repeat-y（垂直方向上重复）、no-repeat（不重复）。background-position：背景图片的位置，即可以使用top,left,right,bottom,center设置，也可以使用像素值。background-position-x：背景图片水平位置。background-position-y：背景图片垂直位置。