CSS常用样式有哪些

这篇文章主要为大家展示了"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)、需要注意的：

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

                                                            
                    
            
123
        
123
        
123
                                        
            ///////////////////////////////////////////////////////////////////////////                                        
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; #以内联标签的形式打印

                                                    不会出现的        内联标签        
块级标签
        
块级标签
    

运行结果

6、cursor

使用目的：在鼠标到达这个位置时，鼠标会出现不同的风格形式；

                                            小手        1        2        3        4   #可以自定义形式(小图标)    

这个截图看不出效果，就是不同的形式展现，鼠标在不同的文字上出现时;

7、float

一般使用left和right;

使用目的：划分区域，可以使之飘起来，是以堆叠的形式展现；

                                                        
                    
div1
            
div2
            
 #解决子标签有float,还能使用父标签样式的方法2        
    

运行结果

8、position

常用的就三种：

(1)、position:fixed 固定的位置，不在改变

(2)、position:relative

(3)、position:absolute relative和absolute一般联合使用；

分别看几种运行结果

9、opacity(透明度)

使用目的：一般设置图片/背景颜色的亮度；

.p_w_picpath{    opacity:0.4;    }

10、模拟一个对话框

写一个小例子，就是出现对话框，让我们自己选择的那种；

                                                
            
                
IP
                
编辑
            
            
                
11.11.11.11
                
删除
            
            
                
11.11.11.12
                
删除
            
        
                        
                                
            
提示
            
确定要删除吗?
            
                                            
        
                        

运行结果

以上是"CSS常用样式有哪些"这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注行业资讯频道！