前端之旅——CSS

CSS 定义

　　CSS是Cascading Style Sheets 的简称，中文称是层叠样式表

　　属性和属性值用冒号隔开，以分号结尾

CSS 四种引入方式

　　1.行内式

　　　　行内式是在标签的style属性中设定CSS样式

<div style="..."><div>

　　2.嵌入式

　　　　嵌入式是将CSS样式集中写在网页的<head>头标签的<style></style>标签中

<head>
    ...
    <style type="text/css">
        ....
    </style>
</head>

　　3.导入式

　　　　将一个独立的.CSS文件引入HTML文件中，导入式使用@import 引用外部CSS文件

　　导入式会在整个网页装载完成后再装载CSS文件

<head>
   ...
     <style type="text/css">
        @import " css文件路径"

    </style>
</head>

　　4.链接式（导入就用这种）

　　　　将一个独立的 .css 文件引入到HTML文件中，使用<link>标记在<head>标记中

　　　链接式会以网页文件主体装载前装载CSS文件

　　rel = stylesheet (告诉它是层叠样式表)

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

</head>

样式应用顺序：

　　如果外部样式、内部样式、内联样式同事应用于同一个元素，属性不一样的话就会以合并的方式呈现。

　　如果是应用于同一个元素且同一个属性。他们的权重是，行内样式 > 内部样式 > 外部样式

有个例外的情况：如果外部样式放在内部标签的后面，外部标签将会覆盖内部标签

基本选择器：！important 固定修改后面再有修改这个标签的属性以!important 优先

1.通用元素选择器

*匹配应用到的所有标签。

*{  color:red }

2.标签选择器

匹配所有使用 xx 标签的元素（可以匹配到所有标签）

div{ color:yellow}

3.类选择器

匹配所有class属性中包含info的元素。

语法：点.类名{样式}（类名不能以数字开头，类名要区分大小写）

.mycolor{color:yellow>
<div class="mycolor">nick</div>

4.id 选择器

使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）

　　语法：#id 名{} （id 不能以数字开头）

#mycolor {color:yellow}
<div id="mycolor">NICKE<div>

组合选择器：

1.多元素选择器

　同时匹配h1，h2 标签，之间用逗号分隔

h1,h2{color:yellow}
<h1>牛魔大力陷滂沱</h1>
<h2>虎魔狂乱心不死</h2>

2.后代元素选择器

匹配所有div 里的 p 标签之间用空格分隔

div p {color:yellow}
<div>
<p>nick</p>
<div>
<p>123</P> 
</div>   

</div>

3.子元素选择器

匹配所有div标签里嵌套的子标签p标签，之间用>分隔

只找儿子

4.毗邻元素选择器

匹配所有紧随div标签之后的同级标签p，之间用+分隔（只能匹配一个）

div + p{color:yellow}
<div>123</div>
<p>nick</p>

属性选择器：title标题可以是class id 等

1.[title]&P[title]

　　设置所有具有title属性的标签元素；

　　设置所有具有title属性的p标签元素。

设置所有具有title属性的标签元素；
[title]
{color:yellow}
p[title]
设置所有具有title属性的p标签
{color;yellow}
<div title>nick</div>
<p title>nick</p>

2.[title=nick]

设置所有title属性等于"nick"的标签元素

[title="nick"]
{color:yellow}

3.[title~=nick]

设置所有title属性值中，有一个值等于nick的标签元素

[title~="nick"]
{color:yellow;}
<p title="nick asd cas sad">nick</p>
<p title="group askii append">juex</p>

4[title|=nick]

设置所有title属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“nick”开头的标签元素

[title="nick"]
{color;yellow}
<p title="nick-asdsad-asd">nick</p>

5.[title^=nick]

设置属性值以指定值开头的每个标签元素

<title^="nick">
{color:yellow;}
<p title="nickdasds asd">nick</p>

6.[title$=nick]

设置属性值以指定值结尾的每个标签元素。

[title$="nick"]

{color:yellow}

7.[title *=nick]

设置属性值中包含指定值得每一个元素

[title="nick"]
{color:yellow}
<p title="snickda">nick</p>

伪类选择器

link、hover、active、visited

a：link （未访问的链接状态）
a：hover (鼠标放在链接上1的状态)用于产生视觉效果
a:active （在连接上按下鼠标是的状态）
a:visited （已访问过的链接状态）可以看出已经访问过的链接

a:link{color:blak}
a:hover{color:yellow}
a:active{color:blue}
a:visited(color:red)

before、after

P：before 在每个<p>元素的内容之前插入内容
P：after 在每个<p>元素的内容之后插入内容

p：before{content:"before..."}

常用属性

1、颜色属性：

color

　　HEX（十六进制色：color:#fffoo ）
RGB(红绿蓝 color：rgb（255,255,255）或（100%，100%,100%）
RGBA（和RGB以样，A是透明度在0——1之间取值，color:rgba(255,255,255,0.5)
HSL (css3 有效 H表示色调，S表示包和度，L是表示亮度，color:hsl(360,100%,20%)
HSLA(和hsl相似，a表示透明度)

transparent

全透明

opacity

元素的透明度，语法：opacity:0.5
属性值在0.0到1.0范围内，0表示透明，1表示不透明
filter 滤镜属性（只适用于早期的IE浏览器，语法：filter:alpha(opacity:20)）

2、字体属性：

font-style:用于规定斜体文本

normal 文本正常显示
italic 文本斜体显示
oblique 文本倾斜显示

font-weight:设置文本的粗细

normal(默认)
bold(加粗)
boolder(相当于<strong>和<b>标签)
lighter （常规）
100~900 整百（400=normal,700=bold）

font-size:设置字体的大小;像素px

默认值：medium
<absolute-size>可选参数值；xx-small、xx-small、small、medium、large、x-large、xx-large
<relative-size>相对于父标签中字体的尺寸进行调节。可选参数值：smaller、larger
<percentage>百分比指定字体大小
<length>用长度指定字体大小，不允许复数

font-family:字体名称

使用逗号隔开多种字体（优先从前向后，如果系统中没有找到当前字体，则往后面寻找）

font：简写属性

语法：font：字体大小/行高字体（字体要在最后）

3.文本属性：

white-space:设置元素中空白的处理方式

normal 默认处理方式
pre 保留空格，当字体超出边界时不换行
nowrap 不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
pre-wrap 保留空格，当文件碰到边界时换行
pre-line 不保留空格，保留文字的换行，当蚊子碰到边界时换行

direction:规定文本的方向

　　ltr默认，文本方向从左到右
rtl 文本方向从右到左

text-align：文本的水平对齐方式

　　left
center
right

line-height:文本行高

normal默认

vertical-align:文本所在行高的垂直对齐方式

　　baseline默认
sub 垂直对齐文本的下表，和<sub>效果一样
super 垂直对齐文本的上标，和<sup>效果一样
top 对象的顶端与所在容器的顶端对齐
text-top 对象的顶端和所在行文字顶端对齐
middle 元素对象基于基线垂直对齐
bottom 对象的底端与所在行的文字底部对齐
text-bottom 对象的底端与所在行文字的底端对齐

text-indent: 文本缩进

letter-spacing：添加字母之间的空白

word-spacing；添加每个单词之间的空白

text-trasform ：属性控制文本的大小写

　　capitalize 文本中的每个单词以大写字母开头
uppercase 定义仅有大写字母
lowercase 定义仅有小写字母

text-overflow:文本溢出样式

　　clip 修剪文本
ellipsis 显示省略符号 ... 来代表被修剪的文本
string 使用给定的字符串来表示被修剪的文本

<!DOCTYPE html>
<html>
   
<head>
    <meta charset="utf-8">
    <title>网页标题<title>
    <style>
           div{
               width:100px;
               height:100px;
              white-space:nowrap;
              overflow:hidden;
              text-overflow: ellipsis;
 
                 }





</head>


<body>

             <div>昨夜我释放了所有的思想，理想，欲望，进入睡眠；清晨我接收了所有的欲望醒了</div>



</body>


</html>

text-decoration：文本的装饰

　　none ，默认 (可以把a 标签的下划去掉)
underline 下划线
overline 上划线
line-through 中线

text-shadow 文本阴影

　　第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
text-shadow:5px 5px 5px #888;

word-warp 自动换行

　　word-warp:break-word；

<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>title</title>
          <style>
               p{
                     width：150px
                     height：160px
                     background-color:#FFA500
                     box-shadow:10px   10px   5px  #888;
                     /*边框阴影*/
                     word-wrap:break-word;
                    /*自动换行*/         
               }
           </style> 
     </head>
     <body>
                   <p>当你凝视深渊的时候，深渊也在凝视你</p>
     </body>
</html>

背景属性

background-color: 背景颜色

background-image 设置图形为背景

　　url（"https:www.xxxx.com"）图片地址
background-image: linear-gradient(green,blue,yellow,red,black)；颜色渐变效果

background-position 设置背景图像的位置坐标

background-size 设置图片大小

　　background-position: center center 图片位置居中 X轴center y轴center
100px 195px 分别代表坐标x,y轴

background-repeat 设置背景图像不重复平铺

no-repeat 设置图像不重复，常用
round 自动缩放直到适应并填充整个容器
space 以相同的间距平铺且充满整个容器

background-attachment 背景图像是否固定或者随着页面的其余部分滚动

background 简写

　　background : url("o_ns.png") no-repeat 0-196px;
background :url("o_ns.png") no-repeat center bottom 15px
background: url("o_ns.png") no-repeat left 30 px bottom 15px

5.列表属性

list-style-type : 列表项标志的类型

　　none 去除标志 list-style:none 把前面的标志都去掉
decimal-leading-zero; 02
square: 方框
circle 空心圆
upper-alph ; 实心圆

list-style-image: 将图形设置为列表项标志

list-style-position ：列表项标志的位置

inside
outside

list-style 缩写

页面布局

dispaly 属性

none 把某个标签隐藏起来不在文档流占位置
black 把内联变成块级标签具有长宽属性
inline 把块级变成内联可以和别的属性在一行
dispaly:inline-black 既有内联属又有块级属性
list-item 显示为列表元素

盒子模型

1、边框

border-style ：边框样式

　　solid 默认，实线
double 双线
dotted 点状线条
dashed 虚线

border-color:边框颜色

border-width:边框宽度

border-radius:圆角

　　1个参数：四个角都应用
2个参数：第一个参数应用于左上、右下；第二个参数应用于左下、右上
3个参数：第一个参数应用于左上；第二个参数应用于左下，右上；第三个参数应有于右下
4个参数：左上、右上、右下、左下（顺时针）

border:简写

　　border：2px yellow solid

box-shadow：边框阴影

　　第一个参数是左右位置
第二个参数上下位置
第三个参数是虚化效果
第四个参数是颜色
box-shadow: 10px 10px 5px #888;

<!DOCTYPE html>
<html>
       <head>
         <meta charset="utf-8">
         <title> 软弱就是人生悲剧的开始</title>
         <style>
                div{
                      border:2px solid;
                      border-radius:25px;
                      width:140px;
                        }
           </style>
       </head>
        <body>
              <div>心静如尘</div>
        </body>
</html>

<!DOCTYPE html>
<html>
        <head>
              <meta charset="utf-8">
              <title>孤独遍布人间</title>
             <style>
                    .radius1{
                              display: inline-block;
                              width:  100px;
                              height:100px;
                              background-color:yellow;
                             border-radius:20px
                             
                                }
                    .radius2{
                              display:inline-block;
                              width:100px;
                              height:100px;
                              background-color:red;
                              border-radius:20px 35px;
                              }
                    .radius3{
                                 display:inline-block;
                                width:100px;
                                height:100px;
                                background-color:blue;
                                border-radius:20px 35px 50px;
                                  }
             </style>
        </head>
        <body>
             <span class="radius1"></span>
              <span class="radius2"></span>
              <span class="radius3"></span>
        </body>
</html>

边框实现各种三角符号：

<!DOCTYPE html>
<html>
       <head>
            <meta charset="utf-8">
            <title> 所有博客都用于学习</title>
            <style>
                    .triangle-one{
                                  display:inline-block;
                                  border-top:50px red solid;
                                  border-right:50px green solid;
                                  border-bottom:50px yellow solid;
                                  border-left: 50px blue solid;
                               
                                  }
                     .triangle-two{
                                    display:inline-block;
                                    border-top:0px red solid;
                                    border-right:50px  green  solid;
                                    border-bottom:50px yellow solid;
                                    border-left:50px blue solid;  
                                    }
                     .triangle-stree{
                                    display:inline-block;
                                    border-top:50px red solid;
                                    border-right:0 green solid;
                                    border-bottom:50px yellow solid;
                                    border-left:50px blue solid;
                                     }
                   .triangle-four{
                                   dispaly:inline-block;
                                   border-top:50px red solid;
                                   border-right: 0px green solid;
                                   border-bottom:0px yellow solid;
                                   border-left:50px blue solid;
                                    }
                  .triangle-five{
                                    display:inline-block;
                                    border:50px transparent solid;
                                    border-top:50px red solid;  
                                    }
                 .triangle-six{
                                 display:inline-block;
                                 border:50px transparent solid;
                                 border-bottom:50px yellow solid; 
                                    }
                .triangle-seven{
                                     display:inline-block;
                                     border:50px transparent solid;
                                     border-top:60px red solid;
                                     border-right:0;   
                                     }
                          
            </style>
       </head>
         <body>
             <div class="triangle-one"></div>
             <div class="triangle-two"></div>
             <div class="triangle-stree"></div>
             <div class="triangle-four"></div>
             <div class="triangle-five"></div>
            <div class="triangle-six"></div>
            <div class="triangle-seven"></div>
            <div class="triangle-eight"></div>
        </body>  
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .triangle-one {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 50px green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-two {
            display: inline-block;
            border-top: 0 red solid;
            border-right: 50px green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-stree {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 0 green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-four {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 0 green solid;
            border-bottom: 0 yellow solid;
            border-left: 50px blue solid;
        }
 
        .triangle-five {
            display: inline-block;
            border: 50px transparent solid;
            border-top: 50px red solid;
        }
        .triangle-six {
            display: inline-block;
            border: 50px transparent solid;
            border-bottom: 50px yellow solid;
        }
        .triangle-seven {
            display: inline-block;
            border: 50px transparent solid;
            border-top: 60px red solid;
            border-right: 0;
        }
        .triangle-eight {
            display: inline-block;
            border: 50px transparent solid;
            border-left: 30px yellow solid;
            border-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="triangle-one"></div>
    <div class="triangle-two"></div>
    <div class="triangle-stree"></div>
    <div class="triangle-four"></div>
    <div class="triangle-five"></div>
    <div class="triangle-six"></div>
    <div class="triangle-seven"></div>
    <div class="triangle-eight"></div>
</body>
</html>

View Code

padding:用于控制内容与边框之间的距离；

margin:用于控制元素与元素之间的距离；（<body>有默认的margin元素）

通过以下四个属性定位：

top 上；right 右；bottom下；left左

简写：

一个参数，应用于四边；

两个参数，第一个用于上、下，第二个用于左右；

三个参数，第一个用于上，第二个用于左、右，第三个用于下；

四个按顺时针应用

visibility

　　visibility 元素可见
hidden 元素不可见
collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局

float 浮动

让对象脱离文本流浮动，这种属于半脱离，上放对象是正常文本流就紧贴下方，如果是浮动对象就紧随其后

　　none
left 左浮动
right 右浮

clear 清除浮动：

　　none 默认值，允许两边可以有浮动对象
left 左边不能有，有的话自己下去
right 右边不能有有的话自己下去
both 两边都不能用

clip 剪裁图像

rect 剪裁定位元素：

　　auto 默认值，无剪切
上-右-下-左（顺时针）的顺序提供四个偏移值
区域外的部分是透明
必须指定 position:absolute;
clip:rect(0px,60px,200px,0px)

overflow 设置当对象的内容超过其指定高度及宽度是如果显示内容

　　visible 默认值，内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容时不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

position 规定元素的定位类型

static 默认值，没有定位，遵从正常的文档流

relative 相对定位元素，相对于其正常位置进行定位，遵从正常的文档流

absolute 绝对定位元素,脱离正常的文档流

fixed 绝对定位元素，固定在浏览器的某处

通过 left top right bottom z-index 四种属性定位

z-index 元素层叠顺序

　　z-index 仅在定位元素上有效（列如：position：absoulite）
可以指定复数属性值（例如 -1）

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>TITLE</title>
 6         <style>
 7            .z-index1{
 8                          width:100px;
 9                          height:100px;
10                          background-color:yellow;
11                          position:absolute;
12                          z-intex:-1;
13                           }
14             .z-index2{
15                          width:100px;
16                         height:100px;
17                         background-color:red;
18                         position:absolute;
19                         top:20px;
20                        left:20px;
21                        z-index:5;
22                          }
23         </style>       
24     </head>
25     <body>
26         <div class="z-index1"></div>
27         <div class="z-index2"></div>
28     </body>
29 </html>

View Code

outline 边框轮廓

　　outline-width 轮廓宽度
outline-color 轮廓颜色
outline-style 轮廓样式

zoom 缩放比例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>juex</title>
        <style>
        .zoom1{zoom:100%}
        .zoom2{zoom:200%}
        .zoom3{zoom:300%}
        </style>
    </head>
    <body>
        <div class="zoom1">NICK 100%</div>
        <div class="zoom2">NICK 200%</div>
        <div class="zoom3">NICK 300%</div>
    </body>
</html>

cursor 鼠标的类型状态

鼠标放在以下单词上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style>
        body {
            cursor: url("mouse.png"), auto;
            /*图片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
        }
    </style>
</head>
<body>
    <div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
</body>
</html>

Auto: 默认
  Default: 默认
  e-resize
  ne-resize
  nw-resize
  n-resize
  se-resize
  sw-resize
  s-resize
  w-resize
  Crosshair
  Pointer
  Move
  text
  wait
  help

not-allowed

posted @ 2018-09-27 23:40 juex 阅读(290) 评论(0) 收藏举报

刷新页面返回顶部

juex

前端之旅——CSS

公告