前端-2

HTTP协议是无状态的:连完就断了
HTTP是基于请求/响应模式的
URL:统一资源定位符,就是一个网址:协议名://域名:端口/路径
refer的作用:可以统计从哪进来的,比如统计百度进来的
Content-Type:

一、CSS的引入方式

  • 方式1 行内式(不会用这种)
<p style="color:#ff0000;background-color:#00ff00"></p>
  • 方式2 嵌入式
<head>
    <style>
        //1、通过标签名称进行选择
        div{
            color:red;
            background-color:gray;
        }
        //2、通过id进行选择
        #xx_id{
            color:red;
            background-color:gray;
        }
        //3、通过class
        .xx_id{
            background-color:gray;
        }
    </style>
</head>
  • 方式3 链接式(推荐使用)
    xx.css
div{
    color:red;
    background-color:gray;
}
<link href="xx.css" type="text/css" rel="stylesheet">

  • 方式4 导入式
<head>
    <style>
        @import "xx.css"
        //@import有数量限制,并且是最后加载css样式
    </style>
</head>

二、CSS的选择器

  • 基础选择器
    id不能重复,class可以重复
*通用选择器
*{
    font-size:12px;
 }
 
标签选择器:根据标签的名称进行选择
div{
    
}

id选择器
#p1_id{
    
}

类选择器
.p1_class{
    
}

  • 组合选择器
后代选择器(儿子孙子,,) div 下的p标签
div p{
    
}

div .p_cls{
    
}

子代选择器(只有儿子)
div > p{
    
}

#p_id > .p_cls > div{
    
}

并列选择器
#p_id,#c_id{
    
}

毗邻选择器 紧跟在后()边的某标签
#p_id + p{
    
}

  • 属性选择器
利用属性名来改变
<style>
    [id]{
        color:red;
    }
    
    [class='cls_1']{
        color:red;
    }
</style>


还可以使用自定义的属性
[mudy]{
    
}

div[mudy="good"]{
    
}

<div mudy="good"></div>

选择class中有div1的
div[class~="div1"]{
            color:red;
        }
<div class="div1 div2"></div>

class中以div1开头的
[class^="div1"]{
            color:red;
        }
        
class中包含"di"字段的 
[class*="di"]{
            color:red;
        }
        
伪类:
<style>
        [class*="di"]{
            color:red;
        }

        a:link{
            color:blue;
        }

        a:hover{
            color:red;
        }


        a:visited{
            color:yellow;
        }

        a:active{
            color:green;
        }
</style

before/after
a:after{
            content:"frfr";
            color:red;
        }
        

三、CSS的常用属性

文本属性:
letter-spacing:字母之间的距离
word-spacing: 单词之间的间距

background-size:
background-position:left center;
简写:background:url("12.jpg") no-repeat 100px 100px red;


margin,padding,内边距与外边距
http://www.cnblogs.com/yuanchenqi/articles/5977825.html


display:内联与块级标签相互转换
none
block
inline 不独占一行
inline-block 可调宽高
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,442评论 19 139
  • 转载自:http://www.ruanyifeng.com/blog/2016/04/cors.html可参考:h...
    这很重要吗阅读 4,490评论 0 1
  • 我们写书的,拍电影的 越来越离开我们的读者 为什么精英会衰落 普罗大众从我们的分享里面 得不到新的观点 我们忘了继...
    摄影师柳丁阅读 806评论 0 0
  • 新买的高低床被淘气的孩子晃动着要塌掉了。姑姑说上铺以后只能放东西了,许久未见的堂弟媳妇出现了。 当熙熙攘攘的人群像...
    悠然微儿阅读 1,599评论 0 0
  • 公司:宁波大发化纤有限公司 姓名:陆小燕 期数:六项精进234期学员 组号:利他三组 [日精进打卡第115天] [...
    牛妈牛妈阅读 1,053评论 0 0