028-86922220

关于创新互联

多方位宣传企业产品与服务突出企业形象

前端CSS基础

1、css简介
　　层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
　　CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
2、导入css
导入css有3种方式：
1.元素内嵌
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：申请域名、虚拟空间、营销软件、网站建设、清丰网站维护、网站推广。




    
    Title


    前端CSS基础

效果：

前端CSS基础

2.页面嵌入
嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下：

效果：

前端CSS基础

3.外部引用
也是将一个.css文件引入到HTML文件中

# css定义，文件名称color.css
.page_color{
    /*设置背景颜色及宽带*/
    background-color: darkorchid;
    width: 300px;
}



    
    前端CSS
    
    


    
        
            
            前端CSS基础

效果：

前端CSS基础

注意：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，
闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，
因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。此外行内的样式等级最高
4.优先级
标签>页面嵌入>外部引用
3、css选择器(常用)

前端CSS基础

标签选择器：
    div { background-color:red; }

class选择器： .bd { background-color:red; }

id选择器： #idselect { background-color:red; }

关联选择器： #idselect p{ background-color:red; }

组合选择器：     input,div,p{ background-color:red; } 属性选择器：     input[type='text']{ width:100px; height:200px; }     .c1[xiao='a']{color:red;}
    自定义属性选择器
伪元素选择器：     a:link{background-color:red;}    # 鼠标没有碰过的样式     a:hover{background-color:red;}   # 鼠标放上去的样式     a:active{background-color:red;}  # 选择链接时的样式     a:visited{background-color:red;} # 已经访问过的链接的样式

案例：

CSS选择器案例

1.id应用

"#",这个调用CSS样式的方法，就是在头部 # name意思就是所有id为name的都会使用这个css样式

效果：

ID选择器




    
    前端CSS
    



/* 为所有id为i1的ID应用样式，注意咱们是为了测试，在实际的生产中ID不能相同 */
 id 选择器   id 选择器   如果ID不同,那么将不会应用样式

效果：

2.标签应用

为指定标签统一设置格式：在头部这里的p是标签的名称，也可以是div这样就会给所有的div设置格式

效果：

标签选择器

为类型标签设置样式例如：

、、等标签设置一个样式，代码如下：




    
    前端CSS
     


    
        font size test 19

效果：

3.类选择器

class选择器，id是可以相同的，代码如下：


    
    前端CSS
    
    


    
            class test div

class test a class test span

效果：

注：以上三种选择器，建议使用第三种

4.关联选择器

效果图：

关联选择器应用场景：为某标签下面的标签设置指定的样式：

# 下面的代码就是为应用了这个类选择器的标签下面的所有li标签设置样式

        .container li{
            background-color: pink;
        }

# 问：如果在上面的代码基础上为li标签下的a标签设置样式怎么办呢？在li后面再加个a即可！

        .container li a {
            background-color: pink;
        }

案例：


   

    
        
            test                
                    
                        
                        
                            hello shuaige

效果图：

5.组合选择器

有这么一个场景，看下面的关联组合器，cc1和cc2都要使用相同的样式怎么办？重写一遍？

.container .a .cc1 {
    background-color: pink;
}
.container .a .cc2 {
    background-color: pink;
}

解决方法代码如下：

.container .a .cc1,.container .a .cc2  {
    background-color: pink;
}

上面cc1后面的“逗号”就是或的关系，如果路径都是相同的话可以进行改良代码如下：

.container .a .cc1,.cc2  {
    background-color: pink;
}

这里组合的时候他是按照第一个出现的逗号来进行处理的，看下面的代码：

/*组合选择器*/
.container b ,.a .cc1,.cc2  {
    background-color: pink;
}
/*组合选择器分解,上面的分解完成之后谁来应用:background-color: pink;这个样式呢?*/
.container b
.container b .a .cc1
.container b .cc2
　......这里需要注意，“逗号”是或的关系，一般这个不常用，常用的是上面的方法

6.属性选择器

写表单验证的时候最常用,举个例子来说看下面的代码：

我要在这么input下找到type为text的标签并且给他设置样式，在上面咱们知道了组合标签，但是组合选择器最小单元是标签，他不能定位到type属性

怎么做呢？在组合选择器后面加个[type=“text”]即可

效果图：

需求又来了，我想找到input标签为type为text并且name为“lianxi”的那个input标签

解决方法：在增加一个属性就行了(注意中括号之间没有空格不会报错但是没有效果)，代码如下：

效果：

属性标签经常用，要记住

也可以使用自定义属性来定义,并且所有的标签都可以使用自定义属性：


    
    shuaige

更多选择器
4、css常用的属性　
1.颜色属性：

color：green
color：#ff6600
color：#f60
color：rgb(255,255,255)      # 红(R)、绿(G)、蓝(B) 每个的取值范围0~255
color：rgba(255,255,255,1)   # RGBA是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha的(色彩空间)透明度

2.字体属性：　　

font-size:14px/50%/larger
font-family:微软雅黑,serif
font-weight:normal(默认值)/bold(粗)/bolder(更粗)/lighter(更细)
                   100、200、300~900,400 = normal，而 700 = bold

简写方式:
font: 20px '微软雅黑'
3.背景属性：

background-p_w_picpath:url(图片路径)
background-repeat:no-repeat(不重复)/repeat(重复平铺满)/repeat-x(向Y轴重复)/repeat-y(向Y轴重复)
background-position: right top(20px 20px);(横向：left center right)(纵向：top center bottom)
简写方式:
    background:背景颜色 url(图像) 重复 位置
    background:#f60 url(p_w_picpaths/bg,jpg) no-repeat top center

代码：


    
    前端CSS


    
     
        Hello,html

前端CSS基础

div是块级别的标签，我们的图片仅仅是一个小的图片，但是现在是平铺，所以看下面的代码：

效果：

前端CSS基础

4.文本属性：　　

text-align: center;   # 横向排列
line-height: 200px;   # 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
text-indent: 150px;   # 首行缩进，
letter-spacing: 10px; # 字符间距
word-spacing: 20px;   # 单词间距

5.边框属性：

border-style: none   # 无边框
              solid  # 直线边框
              dashed # 虚线边框
              dotted # 点状边框
              double # 双线边框
              inherit # 继承
              groove # 凸槽边框
              ridge  # 垄状边框、inset inset边框、outset outset边框 依赖于border-color属性
border-width：px  固定值的边框
              medium 中等边框
              thick 粗边框
              thin 细边框
              inherit继承       
 
border-color：red
              #ff0000
              rgb(255,255,0)
              rgba(255,255,0,0.1)

border-radius: px 倒角
简写方式：
      border：2px #f60 solid

代码：











# 边框可以单独的设置一边的边框、上、下、左、右

前端CSS

前端CSS基础

6.列表属性：

list-style-type:none    无标记。
                disc    默认。标记是实心圆。
                circle  标记是空心圆。
                square  标记是实心方块。
                decimal 标记是数字。
                decimal-leading-zero    0开头的数字标记。(01, 02, 03, 等。)
                lower-roman     小写罗马数字(i, ii, iii, iv, v, 等。)
                upper-roman 大写罗马数字(I, II, III, IV, V, 等。)
                lower-alpha     小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
                upper-alpha     大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
                lower-greek  小写希腊字母(alpha, beta, gamma, 等。)
                lower-latin 小写拉丁字母(a, b, c, d, e, 等。)
                upper-latin 大写拉丁字母(A, B, C, D, E, 等。)
                hebrew    传统的希伯来编号方式
                armenian    传统的亚美尼亚编号方式
                georgian    传统的乔治亚编号方式(an, ban, gan, 等。)
                cjk-ideographic 简单的表意数字
                hiragana    标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
                katakana    标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
                hiragana-iroha  标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
                katakana-iroha  标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）
 
list-style-position:inside  列表项目标记放置在文本以内，且环绕文本根据标记对齐。
                    outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
                    inherit 规定应该从父元素继承 list-style-position 属性的值。
 
list-style-p_w_picpath:URL       图像的路径。
                 none      默认。无图形被显示。
                 inherit   规定应该从父元素继承 list-style-p_w_picpath 属性的值。
 
简写方式:
    list-style:square inside url('/i/arrow.jpg');

7.dispaly属性：　　

display:none    # 隐藏属性
        block   # 变块级元素
        inline  # 变内联元素
        inline-block # 内联元素默认不能设置长宽，块级可以，这个让内联元素可以设置height width

代码：


前端CSS


前端JavaScript


前端HTML

效果：

前端CSS基础

8.cursor属性：

鼠标停放时显示的效果

cursor:pointer  # 鼠标变小手
       help      
       move

代码：

停放在这里显示小手(pointer)

    停放在这里显示问号(help)

    停放在这里显示转圈(wait)

    停放在这里显示移动(move)
    
    停放在这里显示定位(crosshair)

9.opacity属性：

opacity：0.4  # 0-1之间的小数，颜色透明度

10.z-index属性：

z-index：10  # 设置优先级，一般用在模态对话框

11.margin,pading边距属性：

margin: 10px    # 外边距(本身不会增加)，与边框的距离
padding: 10px   # 内边距(本身会增加) 遵循上右下左，元素之间的距离

12.float属性

float:left/right
clear:both

    
        a
        b

代码：




    
    前端CSS

效果：

前端CSS基础

注：这里需要注意，有一种情况，如果不给父div设置高度，并且设置了float之后，子的float可能会覆盖父div的颜色怎么办？在父的div内加一条：

13.position属性

position: fixed      # 固定浏览器窗口，网页返回顶部的按钮
          absolute   # 固定窗口
          relative   # 一般用于和absolute配合使用，相对于absolute
    
        111111
    
    
        
            111

模态对话框




    
    模态对话框

注意：
1、css文档从上到下执行，以最后一个为准

a {
    font-size: 10px;
}
b {
    font-size: 40px;
}
 ddd

2、有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h2,h3,h4,h5,h6,h7,p,dt 切记
3、父div里面的子div都float,
　　方法1、在最后加一个div然后添上属性 clear：both
　　方法2、定义一个通用属性，

clearfix:afte{
    content: '111';
    display: block;
    clear: both;
    /* visibility 隐藏内容但占高度*/
    visibility: hidden;
    height: 0;
    /*display: none;隐藏内容也不占高度*/
}

一些案例：

带图像input




    
    带图像的登录

伪类选择器运用清除浮动




    
    伪类选择器运用清除浮动
    


    ddd
    888

    
        1
        2

小尖角




    
    小尖角

后台布局一




    
    后台布局一
    


    
    
        
        
            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

后台布局二




    
    后台布局二
    


    
    
        
        
            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

            asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd
asdfsadasd

本文名称：前端CSS基础
浏览路径：http://kswsj.cn/article/jospjo.html

关于创新互联

前端CSS基础

其他资讯