15-02-20 CSS

时间：2015-02-20 14:06:29 阅读：187 评论：0 收藏：0 [点我收藏+]

标签：

一个网页中存在哪些内容由HTML决定，而这些内容长成什么样子由CSS决定;

CSS是Cascading Style Sheet这几个单词的英文缩写，翻译成中文是层叠样式表。CSS能够让网页制作者有效的定制，改善网页的效果。

CSS是对HTML的补充，网页制作者曾经为无法很好的控制网页的显示效果而倍感苦恼，CSS的出现解决了这个问题;之前写出漂亮的网页需要用到大量HTML的属性;

CSS实现了网页内容和页面效果的彻底分离;这句话的意思就是我们在写CSS代码的时候，基本上不去影响HTML;

Ctrl+j弹出智能提示的快捷键;

三种方式向HTML页面中写入CSS代码;

1.内联样式表，

在HTML标签中写入CSS代码;<p style="background:red;font-size:xx-large">今天天气好晴朗</p>

优点:比较灵活，想给谁设置就给谁设置; 缺点：如果要使得其他段落文字也是这样的效果，要写很多重复的代码;

2.嵌入样式表，需要在head标签内写

<head>

p{ font-size:xx-small;} //给HTML中所有P标签设置样式

</style>

</head>

优点：可以给大批的标签一次性设置样式; 缺点：是给单独的某一个标签设置样式的话比较麻烦;

外部样式表link：

link和style是平级的关系，都在head里面;

三种方法的优先级是内联样式表>嵌入样式表>外部样式表;

样式规则的选择器(通过怎样的途径来获得页面上要设置样式的元素)

HTML选择器;

<head>

p{background-color:yellow; font-size:xx-small;} //给HTML中所有P标签设置样式

</style>

</head>

类选择器：//获得指定class的HTML标签;需要给要设置样式的元素的class属性赋值

<tt class = "tt1">床前明月光，疑是地上霜，举头望明月，低头思故乡</tt>

<tt class = "tt2">床前明月光，疑是地上霜，举头望明月，低头思故乡</tt>

<head>

tt.tt1{ background-color:red; }//给HTML中所有P标签设置样式,也可以去掉tt,写.tt1

tt.tt2{ background-color:green; }

</style>

</head>

ID选择器:

ID选择器用法跟类选择器用法差不多，类选择器前面用.，ID选择器前面加#

<p id = "p1">今天天气好晴朗</p>

<p id = "p2">今天天气好晴朗</p>

<p id = "p3">今天天气好晴朗</p>

<head>

#p1{ background-color:red;}

#p2{ background-color:green;}

</style>

</head>

当某些元素使用同一个样式的时候，我们使用类选择器，class;

尽量不要给标签赋值同一个id,要保证每一个id都是唯一的。

总而言之，单一给元素样式的时候，用id,给同一类相同的样式的时候就用class；

关联选择器，

<head>

p em{ background-color:red;}

</style>

</head>

<p><em>今天天气好晴朗</em></p>

<em>今天天气好晴朗</em>

只有第一行背景颜色变红了，

组合选择器：

<head>

h1,h2,h3,h4,h5,h6,td{ background-color:red;}

</style>

</head>

<h1>我是一个粉刷匠</h1>

<h2>我是一个粉刷匠</h2>

<h3>我是一个粉刷匠</h3>

<h4>我是一个粉刷匠</h4>

<h5>我是一个粉刷匠</h5>

<h6>我是一个粉刷匠</h6>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

伪元素选择器

是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。

例如，对于超链接标签(<a></a>)的正常状态 (没有任何动作前)，被访问过的状态，选中状态，光标移到超链接文本上的状态，对于段落的首字母和首行，都可以使用伪元素选择器来定义

目前常用的伪元素有以下几种

A：active 选中超链接时的状态

A：hover 光标移动到超链接上的状态

A：link 超链接的正常状态

A：visited 访问过的超链接状态

P：first-line 段落中的第一行文本

P：first-letter 段落中的第一个字母

Css当中的属性非常多，大体可以分为以下几类：字体，背景，文本，位置，布局，边缘，列表

字体：

Font-family:该属性用于设置字体系列

Font-size:该属性定义文字的大小，绝对大小的设置xx-small,x-small,small,medium,large,x-large,xx-large

font-style:该属性用于定义字体样式为Normal,Italic,Oblique

text-decoration:该属性用于在文本中条件下划线，上划线，中划线

font-weight:该属性用于设置粗体字的磅值，normal,bold,bolder,lighter,100-900

背景：

Repeat-x和Repeat-y 分别在水平或者垂直方向上重复

Background-attachment:确定背景图像是否随内容滚动设置为fixed时，表示固定背景图像，为scroll时，表示图像跟随内容的移动而移动

Background-position:指定背景图像的水平位置和垂直位置，水平位置的取值可以是left,center,right,也可以是数值，垂直的取值可以是top,center,bottom

body{

background-image:url(1.jpg);

Background-attachment:fixed;

Background-color:yellow;

}

我们在网页当中排列元素的时候，所有元素都遵循一个规则，就是从上到下依次去排列，不会有一个重合的，从上到下，从左到右。

由于html元素(比如div)遵循文档流，自己占一层，如果要在这一层里有别的二个div,那么要使这3个div脱离文档流的控制;

<head>

div {

height : 300px;

width : 300px;

}

div.div1 {

background-color:red;

top:100px; //距离顶端

left:100px;

position:absolute;/*绝对定位，到哪就是哪*/ 破换文档流

z-index:3; //z-index越大，越显示在外面;

}

div.div2 {

background-color:yellow;

top:130px;

left:130px;

position:absolute;

z-index:2;

}

div.div3 {

background-color:green;

top:160px;

left:160px;

position:absolute;

z-index:1;

}

</style>

</head>

<body>

</body>

<head>

.div {

right : 0px;

bottom : 0px;

position:fixed; //固定;

background-color:green;

height:300px;

width:300px;

}

</style>

</head>

<body>

<div class="div1"></div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> //把网页变长

</body>

文本：

文本的属性包括：文字间距，对齐方式，上标，下标，排列方式，首行缩进

Word-spacing:设置单词之间的间距

Letter-spacing:设置字符之间的间距

Text-align:设置文本的水平对齐方式，取值可以是left,right,center,justfy

Text-indent:设置第一行文本的缩进值；

Line-height:设置文本所在行的行高;

写网页的时候，其实就是一个盖房子的过程;写网页的时候，也是一个个div堆积起来的，网站中用到了大量的div,看到的小模块就是一个div

盒子模型，一个盒子就是一个div。盒子跟网页，或者说盒子跟div之间的距离用margin表示，margin-top left right bottom

盒子和盒子里面的内容之间的距离用padding，还有一个border属性指的是盒子的边框;

margin{上，右，下，左};

如果只写三个，{上，左右，下}

如果只写二个，{上下，左右}

如果只写一个，{上下左右}

*{margin:0px;} *表示获得所有标签; margin: 0px; 表示上右下左全部是0;

padding也是这个道理 padding,margin可以写在div里; 有些网页左边和右边有一部分是空白的,

<head>

.divindex{

width:900px;

height:800px;

background-color:yellow;

margin:0px auto; //居中显示，上下为0，左右自动调整;如果靠右的话，float:right

}

.divlogo{

width:900px;

height:100px;

background-color:red;

}

.divcontent{

width = 900px;

height = 300px;

background-color:green;

}

.divPicture{

width = 300px;

height = 300px;

background-color:blue

float:left; //不加这句靠左漂浮的话，不能达到.divPicture，.divText在.divcontent上填充的效果，会一上一下，因为要遵循文档流;

}

.divText{

width = 300px;

height = 600px;

background-color:purple

float:left;

}

</style>

</head>

<body>

</div>

<div class = "divPicture"> divText,divPicture漂浮在divContent上;

</div>

</div>

</body>

写网页的时候我们都是先把局给一块一块布好，再往里面填内容;我们怎么区分一块一块，一般都给每一块div一个背景颜色;最终写完之后把背景颜色去掉;

<head>

* { margin:0px; font-size:12px; }

div.divindex{ height:380px; width:290px; background-color:yellow; float:right; }

div.div1{ width = 290px; height:35px; background-color:blue; color:white; text-align:center; // padding:5px;给div加padding他自己也会变大。因此加在P上 }

div.div1 p{ padding:8px font-size :18px; }

#table1{ width:290px; }

td.td2{ color：#246DB2; padding: 6px; border-bottom: 1px dashed #000000; }

td.td3{ color：red; font-weight:bolder; border-bottom: 1px dashed #000000; text-align:right; }

</style>

</head>

<body>

<tr>

<td><div class="div1"><p>.Net培训开班信息</p></div></td>

</tr>

<tr>

<td class="td3">预约报名中</td>

</tr>

<tr>

<td class="td3">预约报名中</td>

</tr>

<tr>

<td class="td3">预约报名中</td>

</tr>

<tr>

<td class="td3">预约报名中</td>

</tr>

</table>

</div>

</body>

有时候设置样式外面嵌入样式表不行，不妨试试内联样式表;

导航

<head>

*{margin:0px; }

div{

background-color:yellow;

height:30px;

width:800px;

margin: 0px auto

}

ul li{

float:left //漂浮，可以使得它不是向下排列

list-style:none; //可以去掉ul中li的点

width : 150px //可以使得它排列很均匀，不是贴在一起;

line-height:30px//可以让导航的字下来;

}

A hover{

font-size : x-large;

background-color : pink;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

</body>

15-02-20 CSS

标签：

原文地址：http://www.cnblogs.com/hhsfrank/p/4296483.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行