您的位置：首页 > 职场人生

【黑马程序员】CSS的相关知识整理

2013-12-15 13:53 302 查看

CSS是层叠样式表的缩写，它可以对页面进行精细的设置，精确到像素级别，是描述元素的皮肤。

一．设置方法

设置CSS有三种方法

（1）       元素内联，就是在元素属性里定义CSS。

在元素标签内部用style="background-color:Red"来设置

（2）       页面嵌入

在<head>中加入<style type="text/css">

       input{background-color:green;border-bottom-color:white}

</style>

（3）       外部引用

新建样式表，在样式表中写CSS，然后通过在页面中<head>里加上

<link type="text/css"rel="Stylesheet" href="CSS1.css"/>

（4）       常见样式

①     background-color：背景颜色

②    color：文本颜色

③    border-style：solid：边框风格，实线，dotted（点）

④    border-color：边框颜色

⑤    border-width：宽度

⑥    display：元素是否显示，可选值：none（不显示），block（块级元素，此元素前后会带有换行符），inline（内联元素，元素前后没有换行符）

⑦    cursor，鼠标在元素上显示的光标图案，cursor（默认光标），pointer（超链接的手），text（输入光标），wait（沙漏），help（问号），cursor：url(光标路径)，页面加载时将光标变成特定图案

⑧    li不显示原点：LIST-STYLE-TYPE:none

（5）       样式选择器

(a)   标签选择器：在标签内部定义CSS

(b)   class选择器：命名一个class，如 .warning｛background：yellow；｝

然后在用到这个样式的地方加上class=“warning”，当两个以上的class时，中间用空格隔开

(c)   标签+class选择器：可以针对不同标签，实现同样的格式名对于不同的标签有不同的样式，只要在样式名前加标签名就行

input.name{text-align:right;color:red;}

label.name{font-style:italic;}

<input class="name" type="text"value="efce"/>

<label class="name">decfrwsv</label>

(d)   id选择器

＃name

｛

font-size:xx-large；

｝

然后在需要用到的地方填上id="name"就行

(e)   其他选择器

1）关联选择器

P strong｛color：red}

表示P标签内的name标签内的内容使用的样式

<strong>srgfrg</strong>

<p><strong>fwesf</strong></p>

2）组合选择器

H1，H2,Input｛｝

表示H1，H2都采用这种样式

3）伪选择器

类似

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 黑马程序员

相关文章推荐

新的分享

章节导航