CSS基础-插曲

简介: CSS基础-插曲

CSS学习



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


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

    <body>
        <!--这里是设置边框的,设置4的方向上的,使用border来进行设置就行。-->
        <div style="color:red;
                                     font-family: 楷体;
                                     font-size: 50px;
                                     background-color: blue;
                                     width:300px;
                                     /*border:10px dashed red;*/
                                     border-top: 10px solid red ;
                                     border-bottom:10px dashed yellow;
                                     border-left: 10px solid burlywood;
                                     border-right: 10px solid purple;
                                 ">
            <p>你好世界</p>
            <p>你好世界</p>
            <p>你好世界</p>
            <p>你好世界</p>
        </div>


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


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


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

span style="border:1px solid:red; width: 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:伪选择器



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


    <style type="text/css">
        /*这里使用伪类来实现功能*/
         a:link
         {
             font-family: 楷体;
             color: burlywood;
             text-decoration: none;
         }
         a:hover
         {
             color: yellow;
             text-decoration: underline;
         }
         a:active {
             color: red;
             text-decoration: line-through;
         }
         a:visited {
             color: black;
             font-family: 宋体;
         }
    </style>



7:文档流



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



8:float:布局的属性



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


    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <style type="text/css">
            #div1 {
                width: auto;
                height: 100px;
                background-color: yellow;
            }
            #div2 {
                background-color: blanchedalmond;
                width: auto;
                height: 400px;
            }
            #div3 {
                background-color: red;
                width: auto;
                height: 100px;
            }
            #div_left {
                float: left;
                width: 30%;
                height: 100%;
                background-color: blue;
            }
            #div_center {
                float: left;
                width: 60%;
                height: 100%;
                background-color: blueviolet;
            }
            #div_right {
                float: left;
                width: 10%;
                height: 100%;
                background-color: darkgoldenrod;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2">
            <div id="div_left"></div>
            <div id="div_center">
            </div>
            <div id="div_right"></div>
        </div>
        <div id="div3"></div>
    </body>
    </html>


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



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



10:盒子模型的理解

 

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



11:框架


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

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



**2:frameset

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


目录
相关文章
|
前端开发
实验:CSS+Div基础 - 预习报告
网页设计技术实验预习报告。
283 1
实验:CSS+Div基础 - 预习报告
|
Web App开发 前端开发 Windows
CSS基础1 | 青训营笔记
本期作为复习CSS的笔记,比较基础。当然即便最基础的东西也欢迎各路高手指点,以防地基不稳大厦崩塌hhh
CSS基础1 | 青训营笔记
|
前端开发 JavaScript 容器
通俗重制系列--CSS基础
通俗重制系列--CSS基础
129 0
|
前端开发 JavaScript Java
计算机二级web题目(4)--CSS基础
计算机二级web题目(4)--CSS基础
162 1
|
前端开发
CSS基础之选择器
总所周知,css可以为网页设置多种多样的样式,那怎么样可以精确为每一个html标签设置相应的样式呢?
|
前端开发 人机交互
Web开发及人机交互导论 实验三 CSS+DIV基础
Web开发及人机交互导论 实验三 CSS+DIV基础
173 0
Web开发及人机交互导论 实验三 CSS+DIV基础
|
前端开发
CSS基础-塌陷及定位
clear:right; 右侧不允许有浮动元素
124 0
|
前端开发
CSS 基础(下)
CSS 基础(下)
76 0
CSS 基础(下)
|
前端开发 编译器 C++
CSS 基础(中)
CSS 基础(中)
115 0
CSS 基础(中)