css基础

来源：互联网发布：java classpath是什么编辑：程序博客网时间：2024/05/17 03:18

css层叠样式表（Cascading Style Sheets），用来设置元素样式和它们的显示位置。

为文档添加样式的三种方法

1.行内样式

写在特定html标签的style属性里的，只能影响它所在的标签。

<span style="color:red;">行内样式</span><p style="font-size:12px;">hello</p>

2.嵌入样式

写在<style>标签里，放在html文档的head元素中，应用范围限于当前页面。

<head>    <style tyle="text/css">        h1{font-size:16px;}        p{color:blue;}    </style></head>

3.链接样式

在创建包含多个页面的网站时，需要把样式集中在一个单独的文件里，这个文件就叫样式表。样式表其实就是一个扩展名为.css的文本文件。可以在任意多个html页面中链接同一个样式表文件，每个页面中只需加入类似下面的这一行代码即可。

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

链接样式的作用范围可以是整个网站。只要使用<link>标签把样式表链接到每个页面，相应的页面就可以使用其中的样式。

css规则命名惯例

这里写图片描述
命名规则的扩展

//多个声明包含在一条规则里 p{color:blue;font-size:12px;font-weight:blod;}//多条规则应用给一个选择符h1,h2,h3{color:blue;font-weight:bold;}h3{font-style:italic;}

常用选择器

要想使用css将样式应用于特定的html元素，需要想办法找到这个元素。在css中，执行这一任务的样式规则部分称为选择器。

元素选择器

用来寻找特定类型的元素,只需指定希望应用样式的元素的名称。

p{color:black;}

id选择器

用于在页面中唯一的标识一个元素。每个id名在页面中都只能使用一次。

#firstname{font-weight:bold;}<p id="firstname">Happy Birthday!</p>

class选择器

标示一组具有相同特征的元素

.specialtext{font-style:italic;}.specialtext2{font-size:12px;}<p class="specialtext">Happy Birthday!</p><p class="specialtext specialtext2">Hello</p>//两个选择器的样式都会应用到hello

属性名选择器

//选择带有disabled属性的button元素button[disabled]{cursor:default}

属性值选择器

//选择带有type属性和submit属性值的input元素input[type=submit]{cursor:pointer}

伪类选择器

:hover

//在鼠标移到a元素时添加特殊样式a:hover{background-color:yellow;}

通用选择器

 //会应用于所有元素*{margin:0;padding:0}

选择器的组合情况

选择器之间什么都不加

什么都不加，则要同时具有这两个条件

//选择为p元素且class属性为specialtext的p.specialtext{font-style:italic;}

选择器之间加空格

加空格，在满足前一个条件的情况下，找满足后一个条件的。

//满足id属性为shortcut-2014的前提下，选择class属性为w的#shortcut-2014 .w{background:#F1F1F1}

选择器之间加逗号

加逗号，各自实现自己的

h1{color:red;}h2{color:red;}//前两个相当于h1,h2{color:red;}

常用样式

文本样式

颜色，字体，大小，粗细，水平对齐方式，垂直对齐方式，装饰

颜色colorcolor的值用英文单词或16进制来表示color：redcolor:#666字体font-family大小font-size:12pxpx是像素的单位粗细font-weight:bolderbolder是加粗水平对齐text-aligh值为left，right，center垂直对齐设置行间距，当设置为文字的容器的高度的时候，文字就处在容器的中间line-height：3px;装饰text-decorationtext-decoration：underline//下划线text-decoration：line-through//删除线

背景样式

背景图片,图片位置，图片重复，颜色

background-imge：url("1.jpg")background-position:10px 20pxbackground-repeat：no-repeat//背景图像不平铺                   repeat-x//横向平铺                   repeat-y//纵向平铺background-color：#666

网页中比较好看的按钮，都是通过设置背景图片得来的。为了减少请求服务器的次数，那些制作按钮的图片都放在一张背景透明的图片上。比如，先设置一个div，大小和想要的按钮相同（获取的时候只获取这么大的图片），然后将里面的小图片移动到左上角（获取图片都是从左上角开始获取的）

图片样式

外形（宽和高），对齐

widthheight水平对齐text-aligh值为left，right，center垂直对齐用相对定位

0 0