CSS快捷键、文本设置、基本语法及页面引用、开发工具、常用选择器

2019-12-10 本文已影响0人 Agony_锐

<href>指向一个链接地址 <target>设置打开目标页面的位置——（blank新窗口、self当前窗口）

一、快捷键：

1. css中用/*注释*/ ； html中用

2. # ：占位符号

3.12工具=检查

4.Ctrl shift+D 整行复制粘贴

5.Ctrl shift+K 删除一行

6.Ctrl Alt+上下键多行同时编辑

7.Ctrl +enter 不用在行尾，直接换行

二、css文本设置：

常用的应用文本的css样式：

color 设置文字的颜色，如： color:red;

font-size 设置文字的大小，如：font-size:12px;

三、css基本语法及页面引用:

1.css基本语法:

(1) css的定义方法是：

选择器 { 属性:值; 属性:值; 属性:值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。

代码示例： div{ width:100px; height:100px; color:red }

2.css页面引入方法：

1、外联式：通过link标签，链接到外部样式表到页面中。（答辩时统一用这个）

<link rel="stylesheet" type="text/css" href="css/main.css">

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

<style type="text/css">

div{ width:100px; height:100px; color:red }

......

</style>

3、内联式：通过标签的style属性，在标签上直接写样式。

<div style="width:100px; height:100px; color:red ">......</div>

<link rel="stylesheet" type="text/css" href="CSS/style.css">（href 指定一个外部css文件）

四、开发工具：

五、常用选择器：

1、元素选择器（标签）

格式：标签名{}

影响范围大，建议尽量应用在层级选择器中

p{color:red;} —— 选中所有的p标签

h1{ color:red;} —— 选中所有的h1标签

2、id选择器

格式：#id { }

通过id名来选择元素，元素的id名称不能重复，一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器

#p1{ font-size:20px; } —— 选中id等于p1的标签

3、组选择器（并集选择器）

格式：选择器1,选择器2,选择器3 { }

多个选择器，如果有同样的样式设置，可以使用组选择器

#p1,.p2,h1{background-color: yellow;}* —— 选中id等于p1、p2、h1的标签

4、类选择器

格式：.className { }

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

.p2{color:red;}

.hello{font-size:50px;}

5、通配（用）选择器：

格式：*{ color:red}

*{color:red} —— 选中页面上所有的元素

6、复合选择器

格式：选择器1选择器2{}

span.p3{ background-color: yellow;}

p#p1{ background-color: red;}

六、块和内联：

内联元素（行内元素）：span、a、img、ifram —— 不换行，除非满了自动换行

a元素：可以包含任意元素，除了本身

块元素：div、p、h1-h6、ul、li —— 独占一行

p元素：不可以包含任何其他块（只能放内联）