重庆分公司

咨询热线：

028-86922220

×

01

关于我们

02

服务项目

高端网站建设

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03

小程序开发

小程序开发

04

案例展示

网站建设案例

小程序案例

电商平台案例

系统平台案例

05

建站动态

06

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

重庆分公司，新征程启航

为企业提供网站建设、域名注册、服务器等服务

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://cqcxhl.cn/article/dihcdo.html

其他资讯

分享至：

公司简介发展历程

高端网站建设小程序开发 APP开发网络营销

网站建设网站设计网站制作小程序

公司地址人才招聘

成都重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

版权所有：成都创新互联科技有限公司重庆分公司渝ICP备2021005571号-4

服务热线：028-86922220