网站建设资讯

NEWS

网站建设资讯

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时,要注意将背景图片放到盒子中,就是必须指明宽、高。

运行结果

CSS常用样式有哪些

4、边框

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

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

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




    
        
        页面一
        
    
    
    
          
        
        
        
        
            西安市
        
        

    

运行结果

CSS常用样式有哪些

5、display

常见的就三种形式:

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

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

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




    
        
        页面一
        
    
        
    
        不会出现的
        内联标签
        块级标签
        块级标签
    

运行结果

CSS常用样式有哪些

6、cursor

使用目的:在鼠标到达这个位置时,鼠标会出现不同的风格形式;




    
        
        页面一

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

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

7、float

一般使用left和right;

使用目的:划分区域,可以使之飘起来,是以堆叠的形式展现;




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

运行结果

CSS常用样式有哪些

CSS常用样式有哪些

8、position

常用的就三种:

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

(2)、position:relative

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




    
        
        页面一
    
    
    
        
        
        
                    
            
        
        
    

分别看几种运行结果

CSS常用样式有哪些

CSS常用样式有哪些

CSS常用样式有哪些

CSS常用样式有哪些

CSS常用样式有哪些

9、opacity(透明度)

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

.p_w_picpath{
    opacity:0.4;    
}

10、模拟一个对话框

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




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

运行结果
CSS常用样式有哪些

以上是“CSS常用样式有哪些”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联网站制作公司行业资讯频道!

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


新闻标题:CSS常用样式有哪些-创新互联
分享链接:http://njwzjz.com/article/dihcdo.html