2016.01.24--h5第四天-CSDN博客

本文链接：https://blog.csdn.net/weiyumeizi/article/details/50573063

css

开发工具：Intellij IDEA

基本语法

selector{ 属性：属性值}属性选择器

例如：h1{color:red;font-size:14px;}
如果值大于1是一个单词，则需加上引号
p{front-famliy:"sans serif"}

选择器分组h1,h2,h3{color:red;font-size:14px;}

继承
body{
color :green;
}

myCss.css

h1{
    /*设置字体颜色及大小*/
    color: blue;
    font-size:50px;
}

index.html

  <title></title>

    <!--三、链接到myCss.css,设置类型-->

    <link href="myCss.css" type="text/css" rel="stylesheet">
</head>
<body>

<!--一、先建myCss.css,再输入h1{color: blue;}-->
<!--二、引用h1-->

    <h1>
        应用了样式表
    </h1>

</body>

连续引用

index.html

<body>

<!--一、先建myCss.css,再输入h1{color: blue;}-->
<!--二、引用h1-->

    <h1>
        应用了样式表
    </h1>
<a>这是a标签的样式</a>
<h2>h2样式</h2>
<h3>h3样式</h3>

</body>

myCss.css

h1,a,h2{
    /*设置字体颜色及大小*/
    color: blue;
    font-size:50px;
}

高级语法

index.html

<body>

<!--一、先建myCss.css,再输入h1{color: blue;}-->
<!--二、引用h1-->

    <h1>
        应用了样式表
    </h1>
<a>这是a标签的样式</a>
<h2>h2样式</h2>
h3样式
<p>h4样式</p>

</body>

myCss.css

h1,a,h2{
    /*设置字体颜色及大小*/
    color: blue;
    font-size:50px;
}

/*未被定义的，自动显示body样式*/
body{
    color: blueviolet;
}
/*自定义段落P的颜色2*/
p{
    color: red;
}

派生选择器

index.html

 <!--三、链接到myCss.css,设置类型-->

    <link href="myCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<p><strong>p标签hello Css</strong></p>
<ul>
    <li><strong>li标签：hello css</strong></li>
</ul>
</body>

myCss.css

/*不加这个之前p标签是不显示颜色的，现在由于指定了li标签，所以li标签下的strong是有颜色的*/
li strong{
    color: red;
}

index.html

/*不加这个之前p标签是不显示颜色的，现在由于指定了li标签，所以li标签下的strong是有颜色的*/
li strong{
    color: red;
}
/*未被定义的同一标签显示默认的颜色*/
strong{
    color: blueviolet;
}

派生选择器和div选择器同时使用

id选择器
id选择器可以标有id的HTML元素指定特定的样式
id选择器以“#”来定义
id选择器和派生选择器是id选择器常常用于建立派生选择器

index.html

    <!--三、链接到myCss.css,设置类型-->

    <link href="myCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<p id="pid">hello css <a href="http://www.jikexueyuan.com">学院</a></p>
<div id="divid" >
   这是div <p>这是第一个divID</p></div>
</body>

myCss.css

#pid{
    color: blueviolet;
}
#divid p{
    color: green;
}

CSS类选择器

类选择器：

类选择器以一个点显示

class也可以用作派生选择器

类选择器与派生选择器的结合及应用

index.html

  <!--三、链接到myCss.css,设置类型-->

    <link href="myCss.css" type="text/css" rel="stylesheet">
</head>
<body>
<p class="pclass">这是一个class效果<a href="http://jikexueyuan.com">学院</a></p>
<div class="divclass">
    Hello Div<p>p标签</p>
</div>

myCss.css

.pclass{
    color: red;
}
.divclass p{
    color: green;
}

CSS属性选择器

index.html

    <title></title>
    <style type="text/css">
        [title]{
            color: blue;
        }
        [title=te]{
            color: red;
        }
    </style>
</head>
<body>
<p title="t">属性选择器</p>
如果title=te显示红色，如果属性title等于其他，则为蓝色
<p title="te">属性和值选择器</p>
</body>

CSS背景

index.html

 <!--一、先建style.css-->
    <!--二、-->
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>测试一下背景是否可以继承</p>
<p>测试一下背景是否可以继承</p>
<p>测试一下背景是否可以继承</p>
<p>测试一下背景是否可以继承</p>
<p>测试一下背景是否可以继承</p>
<p>测试一下背景是否可以继承</p>

</body>

style.css

body{
    background-color: gray;
    background-image: url("xia.jpg");
    /*禁止图片重复*/
    background-repeat: no-repeat;
    /*图片的在窗口中位置，left,center,或者center center*/
  /*或者直接指定尺寸*/
   background-position:0px,0px;
    /*不随着内容滚动*/
    background-attachment:fixed ;

  /*剪裁图片大小*/
background-size: 100px;
}

p{
    width: 150px;
    /*设置内边距*/
    padding: 10px;
    background-color: red;
    /*对p标签设置背景图片*/
    background-image: url("xia.jpg");
}

CSS文本

index.html

<!--二、-->
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>hello 极客学院</p>

<div>
    <!--<h6> 静夜思 </h6>-->
    <h1> 静夜思 </h1>
    <p>床前明月光，</p>
    <p>床前明月光。</p>
    <p>床前明月光，</p>
    <p>床前明月光。</p>
    <!--<p id="p1">This is my first Web page</p>-->
    <!--<p id="p2">This is my first Web page</p>-->
    <!--<p id="p3">This is my first Web page</p>-->
    <p>测试阴影效果试阴影效果试阴影效果试阴影效果试阴影效果试阴影效果试阴影效果试阴影效果试阴影效果试阴影效果试阴影效果试阴影效果试阴影效果</p>
</div>
</body>

style.css

h6{
    /*首行2缩进*/
    text-indent: 2em;
}

h1{
/*首行2缩进*/
text-indent: -2em;
    padding-left: 2em;
}
p{
    /*行间缩进？*/
    padding-left: 2em ;
}
可以规范书写，第一个首字母全部大写，第二个全小写。第三个全大写
#p1{
    text-transform:capitalize;
}
#p2{
    text-transform:lowercase;
}
#p3{
    text-transform:uppercase;
}
设置阴影效果，第一个效果是背景居左，距上方的位置，清晰度的设置，颜色的设置
p{
    text-shadow: 100px 100px 0px #FF0000;
}
P{
    width: 100px;
    /*自动换行*/
    text-wrap: normal;

}