我爱编程

CSS 基础

2016-08-06  本文已影响27人  MrMagicWang

CSS简介

CSS引入

<head>
    <link rel="stylesheet" href="base.css">
</head>

<head>
    <style>
        body {background-color: red;}
        p {margin-left: 20px;}
    </style>
</head>

<p style="color:red;">123</p>

CSS语法规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条属性声明。

/*选择器*/ css中注释用/* */
selector {
    property1:value; //属性声明 = 属性名:属性值
    property2:value;
    ....
}

如果值为若干单词，则要给值加引号：

p {font-family: "sans serif";}

不同浏览器拥有不同私有属性，为了兼容各种浏览器，写法应该参照下面的代码：

.pic {
    -webkit-transform:rotate(-3deg); /*chrome,safari*/
    -moz-transform:rotate(-3deg);  /*firefox*/
    -ms-transform:rotate(-3deg);  /*IE*/
    -o-transform:rotate(-3deg);  /*opera*/
    transform:rotate(-3deg);
}

属性值语法

margin : [<length>|<percentage>|<auto>]{1,4}
基本元素           组合符号               数量符号

            <font-size> <font-family>
合法值： 12px arial
不合法值： 12px 或 arial 12px

<length>&&<color>
green 2px 合法
1em blue 合法
blue 不合法

underline||overline||line-through||blink  
至少需要出现一个，与顺序无关
underline 合法
overline underline 合法

<color>|transparent  只能出现一个
orange 合法
transparent 合法
orange transparent 不合法

bold[thin || <length>]
bold thin 合法
bold 2em 合法

<length>
1px 合法
1px 2em 不合法

<color-stop>[,<color-stop>]+
#fff,red 合法
blue,green 40%,gray 合法
blue 如果只有<color-stop>部分，不合法

<time>[,<time>]*
合法：1s 或 1s 2s

<time>#
合法：2s,3s
不合法：1s 2s

属性值例子：

绿色的为合法的，红色的为不合法的

@规则语法

CSS选择器

选择器简单可分为以下三类：

  1. 简单选择器
  1. 伪元素选择器
  2. 组合选择器
html {color:black;}
p {color:gray;}
h2 {color:silver;}

将段落1设置成蓝色，段落2、3设置成红色，段落3设置成粗体
<div>
    <p>num 1</p>  
    <p class="special">num 2</p>
    <p class="special stress">num 3</p>
</div>

p{color:blue;}
.special{color:red;}
.stress{font-weight:bold;}

#red {color:red;}
#green {color:green;}

下面的 HTML 代码中，id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

注意：id 属性只能在每个 HTML 文档中出现一次

[title]
{
color:red;
}

下面的例子为 title="W3School" 的所有元素设置样式：

[title=W3School]
{
border:5px solid blue;
}

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] { color:red; }

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：
<p lang="en-us">Hello!</p>
[lang|=en] { color:red; }
下面的例子为以指定值#开头的 href 属性的所有元素设置样式。

<a href="http:baidu.com">baidu</a>

[href^="#"]{color:red}

下面的例子为以指定值pdf结尾的 href 属性的所有元素设置样式。

<a href="http://xxx.pdf">xxx.pdf</a>

[href$="pdf"]{color:red}

下面的例子为以包含指定值baidu的href属性的所有元素设置样式。

<a href="http:baidu.com">xxx.pdf</a>

[href*="baidu"]{color:red}

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

input:enabled{color:#ccc;}  /*一个元素可用的状态
input:disabled{color:#ccc;}   /*一个元素不可用的状态
input:checked{color:#ccc;}   /*一个元素如radio被选中的状态

li:first-child{color:#ccc;}  /*列表的第一项*/
li:last-child{color:#ccc;}   /*列表的最后一项*/
li:nth-child(even){color:#ccc;}   /*列表的偶数项*/
li:nth-child(3n+1){color:#ccc;} 
li:nth-last-child(3){color:#ccc;}   /*列表倒数项*/
ul:only-child{color:#ccc;}   /*只有一个元素的列表*/

dd:first-of-type{color:#ccc;}  /*第一个dd*/
dd:last-of-type{color:#ccc;} 
dd:nth-of-type{color:#ccc;} 

span:only-of-type{color:#ccc;}   
/*选中父元素中只有一个span元素的元素中的span并指定样式*/

p:empty{color:#ccc;}   没有内容的元素
:root  根标签
:not()  不包含某元素的选择器
:target
:lang

img[src$=jpg]{}
#banner:hover{}

::first-letter{}  为第一个字母指定样式
::first-line{}  为第一行指定样式
::before{content:"before";}  在某个元素之前插入before
::after{content:"after";}  在某个元素之后插入after
::selection{}  用于被用户选中的内容

h1 em {color:red;}
这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。
其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中:

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响( 因为第二个h1中的strong元素并不直接为h1的子元素，而是h1下em元素的子元素 )：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

h1 + p {margin-top:50px;}

h2~p{}  选中h2后所有为p元素的兄弟节点

选择器分组：可以用逗号来为多个具有相同样式的不同元素来指定样式。

属性的继承：子元素会继承父元素中的属性
自动继承

css优先级


优先级计算（其中数字为权重）
优先级计算例子
优先级高的样式会覆盖掉优先级低的样式

css层叠
相同的属性会覆盖：

css改变优先级

CSS文本

字体

font-size:12px
font-size:2em

font:30px/2 "Consolas",monospace;
font:italic bold 20px/1.5 arial,serif;
font:20px arial,serif;

color:red
color:#ff0000
color:rgb(255,0,0)
color:rgba(255,0,0,1)  设置颜色及透明度
color:transparent  全透明

对齐方式

文本修饰

text-shadow:1px(x轴的偏移方向) 2px(y轴的偏移方向) 3px(阴影模糊半径)

如果文字阴影中的颜色没有设置，那么阴影颜色就是文字颜色

高级设置

text-overflow: clip | ellipsis(文本溢出的时候利用...代替溢出文本)
//要配合下面两个属性使用
overflow:hidden
white-space:nowrap

css模型盒

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距（填充）、边框 和 外边距 的方式。



每个盒子都有：边距、边框、填充、内容四个属性
每个属性都有：上、下、左、右四个部分

boder, padding, margin都有top, right, bottom, left四部分

h1 {padding: 10px 0.25em 2ex 20%;}   按照顺时针顺序
h1 {padding: 20px}  当四个方向的内边距都为20px时

也可以单独设置：

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

padding规则：对面相等，后者省略；4面相等，只设一个

border-radius:50%   正圆

border-radius并不是只有在设置了border的情况下才会生效。

css背景

background-image:url(),url();  先写的在上层，background-color始终在底层

background-position:0 0;
background-position:10px 20px;  x,y分别偏移的距离
background-position:20% 50%; 容器x的20%位置和y轴的50%便宜到容器x的20%位置和y轴的50%
background-position:center center;
background-position:right;
background-position:right 10px top 20px
上一篇下一篇

猜你喜欢

热点阅读