扩大
缩小

いらっしゃいませ

2.CSS样式

 css

css介绍

当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染)。

行内样式

<p style="color: red">Hello world.</p>

内部样式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: red;
        }
    </style>
</head>

外部样式

<link rel="stylesheet" href="commons.css" />

标签选择器

div{ background-color:red; } 
<div >xiaoqian</div>

class选择器

.bd{ background-color:red;  } 
<div class='bd'> xiaoqian</div>

id选择器

#idselect{ background-color:red;  } 
<div id='idselect' > xiaoqian</div>

通用选择器

* {
  color: white;
}

关联选择器(空格)

#idselect p{ background-color:red;  } 
<div id='idselect' >

      <p> xiaoqian</p>

</div>

组合选择器

后代选择器

/*li内部的a标签设置字体颜色*/
li a {
  color: green;
}

儿子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}  

毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
  margin: 5px;
}

弟弟选择器

/*i1后面所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

属性选择器

input[type='text']{ width:100px; height:200px; } 

优先级,标签上style优先,编写顺序,就近原则

注释   

 /* 注释的内容*/

伪类选择器

 /*连接没有被点击过*/
        a:link {
            color: burlywood;
        }

  /*连接被点击过*/
        a:visited {
            color: green;
        }

  /*鼠标移上去*/
        a:hover {
            color: blueviolet;
        }

  /*被选定*/
        a:active {
            color: deeppink;
        }

 /*input获取光标时*/
        input:focus {
            outline: 0;
            background-color: deeppink;
        }

  伪元素选择器

first-letter

给首字母设置样式

 p:first-letter {
            font-size: 48px;
            color: red;
        }

before

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每个<p>元素之后插入内容*/
p:after {
  content:"[?]";
  color:blue;
} 

选择器优先级

内联样式的权重为1000

ID选择器的权重为100

类选择器的权重为10  

元素选择器的权重为1

权重进位永不进位

!important 强制让样式生效,不推荐

属性

字体

/*字体文体*/
body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

/*字体大小*/
p {
  font-size: 14px;
}

字重

font-weight用来设置字重

描述
normal 默认值,标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细,400等同于normal,而700等同于bold
inherit 继承父元素字体的粗细值

字体颜色

十六进制:#FF0000

RGB值:RGB(255,0,0)

颜色名:red

文字对齐

text-align属性设置对齐方式

描述
left 左边对齐 默认值
right 右对齐
center 居中对齐
justify 两端对齐

 文字装饰

text-decoration属性设置特殊效果

描述
none 默认。定义标准的文本。
underline 定义文本下的一条线。
overline 定义文本上的一条线。
line-through 定义穿过文本下的一条线。
inherit 继承父元素的text-decoration属性的值。

去掉a标签下的默认下划线

a {
  text-decoration: none;
}

去掉ul标签默认下的黑点

*{
  list-style-type:none
} 

首行缩进

p {
  text-indent: 32px;
}

背景属性  

/*背景颜色*/
background-color: red;
/*背景图片*/
background-image: url('1.jpg');
/*
 背景重复
 repeat(默认):背景图片平铺排满整个网页
 repeat-x:背景图片只在水平方向上平铺
 repeat-y:背景图片只在垂直方向上平铺
 no-repeat:背景图片不平铺
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/

鼠标滑动背景不动案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景不动效果示例</title>
    <style>
        .c1 {
            height: 500px;
            background: red;

        }
        .c2 {
            height: 500px;
            background: url("图片") no-repeat center;
            background-attachment: fixed;  /*把背景图固定*/
        }

        .c3 {
            height: 500px;
            background-color: green;
        }
    </style>
</head>
<body>


<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>

 边框 

简写样式

#i1 {
  border: 2px solid red;
}

边框样式

border属性设置

描述
none 无边框。
dotted 点状虚线边框。
dashed 矩形虚线边框。
solid 实线边框。

border-radius

实现园角边框效果

/*头像样式*/
.header-img {
    height: 128px;
    width: 128px;
    border: 5px solid white;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 20px;
}

.header-img>img {
    max-width: 100%;
}

margin外边框

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

居中

.mycenter {
  margin: 0 auto;
}

padding内填充

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

简写

.padding-test {
  padding: 5px 10px 15px 20px;
}

顺序:上左下右

float

让标签浮起来,块级标签也可以堆叠

left:向左浮动

right:向右浮动

none:默认值,不浮动

clear

清除悬浮<div style="clear: both;"></div>只对自身起作用

描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

display

display: none; 让标签消失
display: inline; 块级标签变行内标签
display: block;行内标签变快级标签
display: inline-block; 块级标签和行内标签都包含 
具有inline,默认自己有多少占多少
具有block,可以设置无法设置高度,宽度,padding margin

父标签塌陷:

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

overflow溢出属性

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
  • overflow(水平和垂直均设置)
  • overflow-x(设置水平方向)
  • overflow-y(设置垂直方向)

position

position:fiexd; 固定在页面的某一个位置

position:absolute; 绝对定位

position:relative;相对定位 

background 

background:color; 背景颜色

hover

指一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。

z-index

z-index:9;数字大优先级越大,数字大的会覆盖数字小的内容

z-index:8;

opacity

opacity:0.5; 调节透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            top: 0;
            left: 0;
            height: 48px;
            background-color: #2456a2;
            line-height: 48px;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
        .pg-header .menu:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
      <div class="pg-header">
          <div class="w">
              <a class="loge">LOGO</a>
              <a class="menu">全部</a>
              <a class="menu">图片</a>
              <a class="menu">段子</a>
              <a class="menu">新闻</a>
          </div>
      </div>
      <div class="pg-body">
          <div class="w">内容</div>
      </div>
</body>
</html>

菜单栏
菜单栏

 

posted @ 2019-02-24 15:19  等待の喵  阅读(...)  评论(...编辑  收藏