• CSS基础-插曲


    CSS学习

    1:通过css来设置边框的颜色

    我们可以通过border:10px solid red;来统一的设置颜色,但是我们有的时候需要每个边框的颜色不一样,我们就需要通过各自设置的方法来设置边框的颜色。

    1. <body>
    2.     <!--这里是设置边框的,设置4的方向上的,使用border来进行设置就行。-->
    3.     <div style="color:red;
    4.                                  font-family: 楷体;
    5.                                  font-size: 50px;
    6.                                  background-color: blue;
    7.                                  300px;
    8.                                  /*border:10px dashed red;*/
    9.                                  border-top: 10px solid red ;
    10.                                  border-bottom:10px dashed yellow;
    11.                                  border-left: 10px solid burlywood;
    12.                                  border-right: 10px solid purple;
    13.                              ">
    14.         <p>你好世界</p>
    15.         <p>你好世界</p>
    16.         <p>你好世界</p>
    17.         <p>你好世界</p>
    18.     </div>

    只是通过在div中的style中写,我们要是写css一定要写在head中,切记不要这样的书写。

    div中的溢出我们应该如何办。我们可以添加属性,overflow:"";我们可以选择性的进行隐藏溢出的部分。

    2:行内元素设置高宽是没用的,我们必须将其设置为块级元素才能设置,比如<span>元素。

    1. span style="border:1px solid:red; 200px;height: 300px;">你好吗</span>

    这样子是没有效果的,我们要将其设置为块状的元素才行。加上属性display:block;这样子才会显示出来效果。

    3:首行缩进的方法

    利用css的属性,text-indent:4em;可以实现首行缩进的功能。不再使用空格来写。

    4:<margin>标签的学习

    Margin标签是表示元素内边距,设置4周都会改变,<p>标签段落之间的距离就是使用了margin来调节。关于这个的理解我们可以打开F12看网页中的显示效果就可以知道了。

    5:关于选择器

    选择器的形式很多种,我们只需要知道经常使用的那几个就行了。在后面js和JQuery中还有选择器。

    我们需要让一个选择器运用多个样式,我们需要在选择器中加个空格写上选择器的名就行,只要不重复就可以。关于选择器的优先级,是类的选择器高于标签选择器,同时id选择器高于类选择器。[Id>类>标签];在同等优先级下,谁最后定义的样式,谁显示效果。

    把多个选择器可以组合在一起,这样就是多个标签都显示这个效果。

    我们想要让其某个元素的优先级高可以这样设置,在其css后面加上!important就可以让其优先级高。

    6:伪选择器

    这个我还是第一次听说,但是以前好像看见过,就是在选择器后面冒号在写。

    1. <style type="text/css">
    2.     /*这里使用伪类来实现功能*/
    3.      a:link
    4.      {
    5.          font-family: 楷体;
    6.          color: burlywood;
    7.          text-decoration: none;
    8.      }
    9.      a:hover
    10.      {
    11.          color: yellow;
    12.          text-decoration: underline;
    13.      }
    14.      a:active {
    15.          color: red;
    16.          text-decoration: line-through;
    17.      }
    18.      a:visited {
    19.          color: black;
    20.          font-family: 宋体;
    21.      }
    22. </style>

    7:文档流

    将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放元素。其实我们的网页就是安装文档流的形式来展示的。我们可以通过一些方法来脱离文档流,让其可以自定义显示。属性position:通过这个属性来看元素是否脱离文档流。Absolute:绝对定位,相对于整个文档,,fixed是相对于可视区域的位置,是固定定位。Relative这个是相对定位,是相对于当前的位置而言的。

    8:float:布局的属性

    这个最主要的是在div中使用,让其块状的元素可以自由的浮动,根据需求变化。这里的浮动也是和上面的一样,只要发生了浮动就脱离了文档流后面的元素就会跑到原来的位置,我们设置布局的时候,浮动就是要想办法将其元素放到我们想要的位置就行。

    1. <!DOCTYPE html>
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    5.     <title></title>
    6.     <style type="text/css">
    7.         #div1 {
    8.              auto;
    9.             height: 100px;
    10.             background-color: yellow;
    11.         }
    12.         #div2 {
    13.             background-color: blanchedalmond;
    14.              auto;
    15.             height: 400px;
    16.         }
    17.         #div3 {
    18.             background-color: red;
    19.              auto;
    20.             height: 100px;
    21.         }
    22.         #div_left {
    23.             float: left;
    24.              30%;
    25.             height: 100%;
    26.             background-color: blue;
    27.         }
    28.         #div_center {
    29.             float: left;
    30.              60%;
    31.             height: 100%;
    32.             background-color: blueviolet;
    33.         }
    34.         #div_right {
    35.             float: left;
    36.              10%;
    37.             height: 100%;
    38.             background-color: darkgoldenrod;
    39.  
    40.         }
    41.     </style>
    42. </head>
    43. <body>
    44.     <div id="div1"></div>
    45.     <div id="div2">
    46.         <div id="div_left"></div>
    47.         <div id="div_center">
    48.  
    49.         </div>
    50.         <div id="div_right"></div>
    51.     </div>
    52.     <div id="div3"></div>
    53. </body>
    54. </html>

    9:在css文件中导入css文件

    通过@import url(11.css);这种形式就可以导入别的css文件了。这是模块化的设计.

    10:盒子模型的理解

    就是说,这个元素的大小不是我们设置的,元素的大小是由于盒子的各方面属性盒子来决定的。以前总是写这个但是不是很理解,现在终于知道了,其实也不是很难的。

    11:框架

    **1:iframe:不分割当前的页面就可以嵌入某个页面**

    就是可以在某个网页某个区域进行嵌入别的页面内容。

    **2:frameset

    可以把页面进行结构化的划分,就是每个页面都要嵌入别的页面.现在这个已经不用了。都封装到了别的里面去了。

  • 相关阅读:
    H
    GIS+=地理信息+行业+大数据——基于云环境流处理平台下的实时交通创新型app
    计算机图形学(一) 视频显示设备_3_随机扫描显示器
    实战c++中的vector系列--构造、operator=和assign差别
    【技术】正則表達式—匹配电话号码,网址链接,Email地址
    LeetCode(38)-Valid Sudoku
    传智播客《巴巴运动网视频教程(11-106)》avi格式以及兴许44集视频包括所有源码和资源
    mongodb常见管理命令
    Java web 项目读取src或者tomcat下class文件夹下的xml文件或者properties文件
    Axure 8.0.0.3312下载地址以及注册码
  • 原文地址:https://www.cnblogs.com/netxiaohui/p/5138012.html
Copyright © 2020-2023  润新知