Shulou(Shulou.com)06/02 Report--

这篇文章主要为大家展示了"CSS常用样式有哪些"，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下"CSS常用样式有哪些"这篇文章吧。

1、CSS

层叠样式表，用于对页面进行美化。

在HTML中的方式有三种：元素内联、页面嵌入、外部引入。

(1)、元素内联：对其特定标签的样式进行设置;

(2)、页面嵌入：在其...中写入样式，对其整个页面内的标签均可设置;

(3)、外部引入：就是写到了一个文件中(.css)，对需要这种样式时引入文件即可。

2、常见样式

(1)、标签选择器

含义：其后出现的所有这种标签都是这种样式

div{ color: red;}

(2)、class选择器

.logo{ background-color: red; font-size: 18px; border: 1px;}后面调用：

(3)、id选择器

注意：每个标签的id号是唯一的。

#logo{ background-color: red; font-size: 18px; border: 1px;}后面调用：

(4)、关联选择器(以空格分开)

div p{ }后面调用：

:就是div标签下面的p标签是这个样式

(5)、组合选择器(以,分开)

p, div{ color: red;}：后面出现p/div标签的都是这个样式

(6)、属性选择器

input[type = 'text']{}使用：凡是出现input标签中带有type='text'的都使用这个样式

(7)、需要注意的：

.logo{ background-color:#EEAD0E;font-size:18px;border:1px; } .logo a,.logo p{ font-size:56px; } 以上的含义：在logo下的a/p标签使用这个样式 .logo a,p{ font-size:56px; } 这个的含义是：在logo下的a标签或所有的p标签使用这个样式

关于以上样式的完整代码：

页面一 .logo{ background-color: red; font-size: 18px; border: 1px; } .logo a{ } #logo{ background-color: red; font-size: 18px; border: 1px; } div{ color: red; } a{ color: red; } a, div{ color: red; } a div{ } input[type = 'text']{ } 123 123 123 /////////////////////////////////////////////////////////////////////////// 页面一 .logo{ background-color:#EEAD0E;font-size:18px;border:1px; } .logo a,.logo p{ font-size:56px; }

p标签

div标签 a标签

p标签

3、背景图片

(1)、原生的引入图片

#双引号中写的是当前路径下的图片

(2)、背景图片的引入：background;

注意：使用background时，要注意将背景图片放到盒子中，就是必须指明宽、高。

运行结果

4、边框

border：线的宽度 实/虚(solid/dotted) 颜色;后面可以设置边框的宽度和高度;

margin：与外边框的距离;里面的边框相距外边框的距离;

padding：与内边框的距离;里面的文字距离自己里面边框的距离;

页面一 西安市

运行结果

5、display

常见的就三种形式：

(1)、display:none; #隐藏显示

(2)、display:block; #以块级标签的形式显示

(3)、display:inline; #以内联标签的形式打印

页面一 .logo{ display:none; display:block; display:inline; } 不会出现的 内联标签 块级标签 块级标签

运行结果

6、cursor

Purpose: When the mouse reaches this position, the mouse will appear in different styles;

Page 1 small hand 1 2 3 4 #Can customize the form (small icon)

This screenshot does not see the effect, that is, different forms of display, the mouse appears on different text;

7、float

Use left and right;

Purpose of use: Divide the area, make it float up, it is in the form of stack display;

Page 1 .clearfix:after{ #Below the parent label, the child label has float. Use this class to make the child label use the style of the parent label (Method 1) content:'. '; display:block; height:0; clear:both; visibility:hidden; } div1 div2 #Method 2 to solve the problem that child labels have float and can also use parent label styles

operation results

8、position

There are three commonly used:

(1)position:fixed position, not changing

(2)、position:relative

(3)position:absolute relative and absolute are generally used together;

Page 1

Look at several running results separately

9. opacity

Purpose of use: generally set the brightness of picture/background color;

.p_w_picpath{ opacity:0.4; }

Simulate a dialog box

Write a small example, that is, a dialog box appears, let us choose the kind of;

Page 1 .shade{ position:fixed; top:0; right:0; bottom:0; left:0; background-color:#333; opacity:0.6; } .delete{ position:fixed; top:50%; left:50%; width:400px; height:300px; background-color:white; margin-left:-200px; margin-top:150px; } .hide{ display:none; } IP edit 11.11.11.11 delete 11.11.11.12 delete prompt Are you sure you want to delete?

operation results

The above is "CSS commonly used styles what" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.