码迷,mamicode.com
首页 > Web开发 > 详细

css是什么

时间:2018-01-11 11:36:41      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:api   visit   溢出   com   大写   多个   -o   length   注意   

CSS 是什么?

        CSS是Cascading Style Sheets的简称,中文称为层叠样式表。

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

 

CSS 四种引入方式:

1.行内式

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

1

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

2.嵌入式

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

1

2

3

4

5

6

<head>

    ...

    <style type="text/css">

        ...此处写CSS样式

    </style>

</head>

3.导入式
          将一个独立的.css文件引入HTML文件中,导入式使用@import 引入外部CSS文件,<style>标记也是写在<head>标记中。

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

1

2

3

4

5

6

<head>

    ...

    <style type="text/css">

        @import "My.css"; 此处注意.css文件的路径

    </style>

</head>

4.链接式
           将一个独立的.css文件引入到HTML文件中,使用<link>标记写在<head>标记中。

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

1

2

3

4

<head>

    ...

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

</head>

  

样式应用顺序:

  • 行内样式优先级最高
  • 针对相同的样式属性,不同的样式属性将以合并的方式呈现
  • 相同样式并且相同属性,呈现方式在<head>中的顺序决定,后面会覆盖前面属性

!important 

  • 指定样式规则应用最优先

1

2

3

.nick {

    color: yellow !important;

}

 

 

选择器(Selector)

基本选择器:

1.通用元素选择器

        * 表示应用到所有的标签。

1

* {color: yellow}

2.标签选择器

        匹配所有使用 div 标签的元素(可以匹配所有标签)

1

div {color: yellow}

3.类选择器

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

        语法:.类名{样式}(类名不能以数字开头,类名要区分大小写。)

1

2

.Mycolor {color: yellow}

<h3 class="Mycolor">nick</h3>

4.ID选择器

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

        语法:#ID名{样式}(ID名不能以数字开头)

1

2

#Mycolor {color: yellow}

<h3 id="Mycolor">Nick.</h3>

  

组合选择器:

1.多元素选择器

        同时匹配h3,h4标签,之间用逗号分隔。

1

2

3

h3,h4 {color: yellow;}

<h3>Nick</h3>

<h4>Jenny</h4>

2.后代元素选择器

        匹配所有div标签里嵌套的P标签,之间用空格分隔。

1

2

3

4

5

6

7

8

    div p {color: yellow;}

 

<div>

    <p>Nick</p>

    <div>

        <p>Nick</p>

    </div>

</div>

3.子元素选择器

        匹配所有div标签里嵌套的子P标签,之间用>分隔。

1

2

3

4

5

6

    div > p {color: yellow;}

 

<div>

    <p>Nick</p>

    <p>Nick</p>

</div>

4.毗邻元素选择器

        匹配所有紧随div标签之后的同级标签P,之间用+分隔(只能匹配一个)。

1

2

3

4

    div + p {color: yellow;}

 

<div>Nick</div>

<p>Nick</p>

  

属性选择器:

1.[title] & P[title]

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

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

1

2

3

4

5

6

7

8

9

10

11

    [title]

    {

        color: yellow;

    }

    p[title]

    {

        color: yellow;

    }

 

<div title>Nick</div>

<p title>Nick</p>

2.[title=Nick]

        设置所有title属性等于“Nick”的标签元素。 

1

2

3

4

5

6

    [title="Nick"]

    {

        color: yellow;

    }

 

<p title="Nick">Nick</p>

3.[title~=Nick]

        设置所有title属性具有多个空格分隔的值、其中一个值等于“Nick”的标签元素。

1

2

3

4

5

6

7

    [title~="Nick"]

    {

        color: yellow;

    }

 

<p title="Nick Jenny">Nick</p>

<p title="Jenny Nick">Nick</p>

4.[title|=Nick]

        设置所有title属性具有多个连字号分隔(hyphen-separated)的值、其中一个值以"Nick"开头的标签元素。

        例:lang属性:"en"、"en-us"、"en-gb"等等

1

2

3

4

5

6

    [title|="Nick"]

    {

        color: yellow;

    }

 

<p title="Nick-Jenny">Nick</p>

5.[title^=Nick]

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

1

2

3

4

5

6

    [title^="Nick"]

    {

        color: yellow;

    }

 

<p title="NickJenny">Nick</p>

6.[title$=Nick]

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

1

2

3

4

5

6

    [title$="Nick"]

    {

        color: yellow;

    }

 

<p title="JennyNick">Nick</p>

7.[title*=Nick]

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

1

2

3

4

5

6

    [title*="Nick"]

    {

        color: yellow;

    }

 

<p title="SNickJenny">Nick</p>

  

伪类选择器:

1. link、hover、active、visited

  • a:link(未访问的链接状态),用于定义了常规的链接状态。
  • a:hover(鼠标放在链接上的状态),用于产生视觉效果。
  • a:active(在链接上按下鼠标时的状态)。
  • a:visited(已访问过的链接状态),可以看出已经访问过的链接。

1

2

3

4

5

6

    a:link{color: black}

    a:hover{color: yellow}

    a:active{color: blue}

    a:visited{color: red}

 

<a href="#">Nick</a>

2. before、after

  • P:before 在每个<p>元素的内容之前插入内容;
  • P:after 在每个<p>元素的内容之后插入内容。

+ View Code

 

常用属性

 

1. 颜色属性:

  color 

  • HEX(十六进制色:color: #FFFF00 --> 缩写:#FF0)
  • RGB(红绿蓝,使用方式:color:rgb(255,255,0)或者color:rgb(100%,100%,0%))
  • RGBA(红绿蓝透明度,A是透明度在0~1之间取值。使用方式:color:rgba(255,255,0,0.5))
  • HSL(CSS3有效,H表示色调,S表示饱和度,L表示亮度,使用方式:color:hsl(360,100%,50%))
  • HSLA(和HSL相似,A表示Alpha透明度,取值0~1之间。)

  transparent

  • 全透明,使用方式:color: 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(加粗)
  • bolder(相当于<strong>和<b>标签)
  • lighter (常规)
  • 100 ~ 900 整百(400=normal,700=bold)

  font-size: 设置字体的大小

  • 默认值:medium
  • <absolute-size>可选参数值:xx-small、 x-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-transform: 属性控制文本的大小写

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

  text-overflow: 文本溢出样式

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

+ View Code

  text-decoration: 文本的装饰

  • none 默认。
  • underline 下划线。
  • overline 上划线。
  • line-through 中线。

  text-shadow:文本阴影

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

  word-wrap:自动换行

  • word-wrap: break-word;

 

css是什么

标签:api   visit   溢出   com   大写   多个   -o   length   注意   

原文地址:https://www.cnblogs.com/games-lol/p/8266891.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!