0

0

CSS基础 {属性:值;}

高洛峰

高洛峰

发布时间:2016-10-08 17:23:25

|

1959人浏览过

|

来源于php中文网

原创

1.CSS是成叠样式表(Cascading Style Sheets)的缩写.它用于定义HTML元素的显示形式.
2.将CSS引入HTML的方式有三种:
   a.外部样式表:
      
    b.嵌入样式表:
      


   c.内联样式表:
        属性名为style 举例:



3.CSS中的选择器:
  A:简单选择器;
    a:元素选择器;元素 { 属性: 值; }
    b:类选择器;.类名 { 属性: 值; }  注意有个点。
    c:ID选择器;#id名 { 属性: 值;  }  注意有个#,ID选择器只能被引用一次,而类选择器可以被多次引用。
    d:伪类选择器;(有四个状态)                                                                                                                                                                                                                                                                1、a:link{  } (未访问的链接)
                             2. a:visited{  }(已访问的链接)
                             3. a:hover{   }(鼠标在链接上)
                             4. a:active{   }(激活链接)
    e:伪元素选择器;1,  p:first-line{  }
                              2,   p:first-letter{   }
4.复合选择器:
    a:交集选择器:交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集。
       其中第一个必须是标记选择器,第二个必须是类别选择器或者ID选择器。这两个选择器之间不能有空格。
         eg:p.special{   }
            h3.cls{    }
            (以上选择器匹配)
           



           



    b:并集选择器:
              eg: h1,h2,h3,h4,h5,h6{    } 
                  h2.special,.special,#one{    }

    c:后代选择器:(继承最近的)后代选择器产生的影响不仅限于元素的"直接后代",而且会影响到它的"各级后代" 
5.理解样式表的层叠:
   层次的优先级别从小到大依次为:
                            外部样式表
                            嵌入式样式表
                            内联样式
  如果是同一个样式表中不同选择器,优先级别从小到大依次为:
                                                   元素选择器
                                                   类别选择器
                                                   ID选择器



                                          CSS的基本属性---文本样式
1.长度单位  1.px   2.em
2.颜色定义   color
3.设置字体样式   设置文字的字体   font-family:"黑体";
                 设置字体倾斜效果  font-style:Italic;
                 设置文字加粗效果   font-weight:bold; (粗体)   font-weight:bolder; (加粗)   
                                   font-weight:100(范围100-900,数字越大字体越粗)

                 设置英文字母大小写转换   text-transform: capitalize; (单词首字母大写)
                 设置控制文字大小   font-size:..px/..%/..em
                 设置文字的装饰效果   text-decoration: none/underline/line-through(删除线)/overline(顶线);

4.设置段落样式   设置段落首行缩进  text-indent:..em(..个标准字符大小的距离)/..px;
                设置字词间距离     letter-spacing(字母):..px;          word-spacing(单词):..px;     
                 设置段落内部的文字行高   line-height:  
                控制文本的水平位置   text-align:left/right(右对齐)/center(居中)/justify(两端对齐)
                设置文字与背景颜色   color:...;       background-color:...;
                设置段落的垂直对齐方式   vertical-align:...;(只对表格单元格中的元素起作用)







                                           css的基本属性---图像样式
1.设置图片边框:border-width:(粗细)    ;   border-color:(颜色)     ;  border-style:(线性)     ;
     不同的边框可以设置不同的样式,eg:border-left-style、      border-top-width    ....   solid实线
2.图片的缩放: width   height  (百分比,像素)
3.图文混排:
    文字环绕:float (浮动)   
    图片与文字对齐方式:水平对齐 text-align:                                                                                                                                                                                                                                          

立即学习前端免费学习笔记(深入)”;

<br/>

           垂直对齐 vertical-align:
4,。设置背景颜色与图像:background-color:         background-image:url(地址)
      可以使用background-repeat:来控制平铺,repeat:水平和垂直方向平铺,默认值。
                                            no-repeat:不平铺。
                                            repeat-x:只沿水平方向平铺。
                                            repeat-y:只沿垂直方向平铺。
5.设置背景图像位置:background-position:( 可以设置两个值  eg:left top)
6.设置背景图片固定位置  :background-attchment:fixed;          图片滚动: scroll
                            补充:去掉无序列表前的小圆点,list-style: none;
                                  上标用   eg:图像


                                                  定位(查看position7)
1.绝对定位:(设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。)
             position: relative;
             top:..px;
             left:..px;
2.相对定位:  ( 绝对定位的元素的位置相对于最近的已定位的元素,
            如果元素没有已定位的元素,那么它的位置相对于最初的包含块。)position:absolute;
                                                                        top:..px;
                                                                        left:..px;



                                                  css基本属性—表格样式(les8)
1.控制表格:cellspacing:列间距    cellpadding:列的内边距
           border:表格边框       bgcolor:表格颜色     border-collapse:合并相邻列的边框线
           border-spacing : 设置列的间距
   设置表格宽度:table-layout:fixed(固定)或者auto(自动)
    

:表示表头      :表示表内容       :表示表尾   (顺序可以不一样,但一般还是按顺序)

2.设置鼠标经过时表格的样式:a:hover
3.CSS与表单:a:制作像文字一样的按钮
   transparent(透明的) 设置背景透明
   border:0px;     eg:
    b:制作多彩下拉菜单   select  option  
    c:制作只有下划线的输入框   border:0px/none;
                              border-bottom:1px (粗细) dashed(线性) #000000(颜色);
                    补充:1.display:block(行级元素换成块级元素)/ inline(块级元素换成行级元素)
                         2.CSS3的选择器:   :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
                             n 可以是数字、关键词或公式。



                                             用CSS设置链接与导航菜单  (les9)
1.设置超链接样式: 在HTML中    在CSS中还可以用伪类选择器的四个样式     a:link(未访问)     a:visited(已访问)。     
                                                                      a:hover(鼠标移上去)     a:active(激活)
2.创建按钮式超链接:text-decoration: none;               a:link{   }        a:active{   }
  (可以设置这些)    background:  ;
                   color:   ;
                   border-right:  px solid    ;
                   border-bottom: px solid    ;
                   border-left:    px solid   ;
                   border-top: px     。
3.制作荧光菜单:  应用无序列表,

,a:hover,    ( 查  les9)。
4.控制鼠标(cursor)指针  . {cursor:  }  (查 属性下的其他 CSS 2.0 中文手册)。
5.设置项目列表格式: 可以用有序列表

  1. 与无序列表

  •      用  list-style   来设置。 


  • 6.创建简单的导航菜单:   


  •       a:垂直排列菜单


  •       很多时候会用上  list-style-type:none 其作用是去掉有序或无序列表前的数字或圆点。


  •       b:横向菜单


  •       实现横竖转换只需设置float:left即可,同时把宽度取消掉。


  • 7.设置图片翻转效果:(指网页中的一个图片,在鼠标指针经过时换成另外一个图片。)  可以用hover.


  •                                          


  •                                          补充CSS3的属性  rotate(角度) 


  •       效果:当鼠标移上去的时候,列表可以转动你设置的角度。(正为顺时针,负为逆时针,若是180度,可以看见字是倒立的。不能清楚的看见转动


  •                      ,但可以看见字的变化)


  •                 transform(转换):rotate( 旋转;循环 使旋转;使转动;使轮流)(-20deg) ;    deg:程度(degree)


  •                  (查看les9-5)

    Chromox
    Chromox

    Chromox是一款领先的AI在线生成平台,专为喜欢AI生成技术的爱好者制作的多种图像、视频生成方式的内容型工具平台。

    下载


  •                      



  •                                               CSS的盒模型  (les 10)


  • 1.盒子的概念:在CSS中,一个独立的盒子模型content(内容)、border(边框)、padding(内边距)和margin(外边距)4个部分组成。


  •               一个盒子实际所占用的宽度或高度是由“内容+内边距+边框+外边距”组成的。


  • 2.设置边框,内边距,外边距:


  •     a 内边距(padding)  padding属性可以设置1、2、3、4个属性值,分别如下:


  •                         设置1个属性值时,表示上下左右4个padding均为该值。


  •                         设置2个属性值时,前者为上下padding的值,后者为左右padding的值。


  •                         设置3个属性值时,第1个位上padding的值,第2个为左右padding的值,第3个为下padding得值。


  •                         设置4个属性值时,按照顺时针方向,依次为上、右、下、左padding的值。


  •     


  •     b  外边距(margin)   margin指的是元素与元素之间的距离       margin and padding  的设置时一样的。


  • 3.盒子之间的关系:    


  •                   标准的文档流:


  •                   

  • 标记与标记:p简单而言是一个区块容器标记,即

  • 之间相当于一个容器,

  •                                                   可以容纳段落、标题、表格、图片、乃至章节等各种HTML元素。

  •                                         二者的区别在于p是块级元素,它包含的元素会自动换行。而span是内嵌元素,不会换行。

  • 4.盒子在标准流中的定位原则:                      

  •    行内元素之间的水平margin :当两个行内元素紧邻时,它们之间的距离为第1个元素的margin-right加上第2个元素的margin-left。

  •    块级元素之间的垂直margin :当两个块级元素是垂直排列,则情况有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和,

  •                               而是两者中的较大者。


  •  {背景定位:background-position:center; 为 background-position 属性提供值有很多方法。首先,

  •   可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,

  •   不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。)


  •                                            


  •                                                 CSS盒子的浮动与定位

  • 1.盒子的浮动(float):在标准流中,一个块级元素在水平方向会自动伸展。在垂直方向就不会并排。

  •              CSS中有一个float属性,默认为none,float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧,

  •             使用clear清楚浮动的影响

  •             clear属性除了可以设置为了left和right之外,还可以设置为both,表示同时清除左右两边的影响。

  •             position属性可以设置4个值:

  •                             static:默认值

  •                             relative:相对定位  (会相对于它原本的位置,通过偏移指定的距离,到达新的位置。不影响其他盒子)

  •                             absolute:绝对定位(其父元素的相对位置  其会影响他后面的盒子  就好像这个盒子被拿走了,

  •                                                       其他排在后面的盒子将填补前面的位置。)

  •                             fixed:固定定位(当滚动条滑动式其不会改变位置,会一直在那里。)

  • 2.盒子的定位(static):

  •             盒子的定位(relative) ——left、right、top、bottom这四个属性只有当position属性设置为absolute、relative或fixed时才有效。

  •          


  • 3.z-index  :z-index属性用于调整定位时重叠块的上下位置,z-index值大的元素位于值小的上方。(默认的z-index值为0,当两个块的z-index值一样时,

  •                        将保持原有的高低覆盖关系。)

  • 4.盒子的display属性  :display属性的block和inline两个值,一个代表块级显示,一个代表内嵌显示。display还有个值为none,当设置为none时,

  •                                  表示该元素将被隐藏。此隐藏表示该元素彻底从页面上消失。



  •                                                8.28

  • 1.overflow(溢出):有四个值:  visible(默认值。不剪切内容也不增加滚动条)   

  •                              hidden (隐藏内容多出的部分)   

  •                              auto (当内容多出框的时候显示出滚动条)        

  •                              scroll(始终显示滚动条)

  • 2.display(显示):常用的值:  none   :此元素不会被显示。

  •                             block  :此元素将显示为块级元素,此元素前后会带有换行符

  •                             inline  :此元素会被显示为内联元素,元素前后没有换行符。

  •                             inline-block  : 行内块元素。

  • 3.clip(剪切):两个值:  auto :  对象无剪切

  •                         rect ( number number number number ) :  依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,

  •                                                                 其中任一数值都可用auto替换,即此边不剪切 。注意:检索或设置对象的可视区域。

  •                                         区域外的部分是透明的。必须将position的值设为absolute,此属性方可使用。


  •  

  •                                                  8.29(复习)

  • 1.height:auto

  •       overflow:hidden        这是个组合件,其作用是:使自动变到与内部方框(或是最高的那个方框)一样高。必须一起使用。

  • 2.定位 (position)   这里的left是指:离左边多远。top是指离上边多远。

  •                  

  •       相对定位:(position:relative;)其参考点是:本身原来位置的左上角。移动后原来的那个位置会被占据。

  •       绝对定位:(position:absolute;)其参考点是:其父元素有position的左上角。移动后原来的那个位置会空出来。

  • 3.清除(clear)   只影响清除的本身。其意思是:想让哪块动,就在哪块上用clear。通常用clear:left;    clear:both;        

  • 4.display(显示):           display:none;  隐藏,空间留给他们用。

  •                              visibility:hidden;   隐藏,位置空出来,仍在那里。

  •       display:inline;此元素会被显示为内联元素,元素前后没有换行符。

  •       display:block; 此元素将显示为块级元素,此元素前后会带有换行符。

  • 5.用iframe实现框架结构:

  •      

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

38

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

83

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

97

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

223

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

458

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

169

2026.03.04

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

246

2026.03.03

C++高性能网络编程与Reactor模型实践
C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

34

2026.03.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号