【css】关于层叠样式的基础

来源：互联网发布：网络加盟代理编辑：程序博客网时间：2024/06/04 20:15

CSS基础

1.id 和class选择器

id选择器：

#paa{

color:red;

text-align:left;

}

然后在标签中用id="paa"来使用该样式。

2.class选择器

.paa{

color:red;

}

还可以使用p.paal来规定指定p标签中，运用paa class的标签运用此css

在标签中使用class=“paa”来使用

2.css的三种样式

外部式，主要通过link来链接外部样式：

内部式：主要在style中使用

内联式：重要放在标签中，如<p style="color:red;">

3.background的属性

background-color 定义背景颜色

background-image 定义背景图片

background-repeat 属性值:repeat-x表示横向平铺（铺满）同理repeat-y，no-repeat表示不平铺(即重复)

background-attachment：（不懂）

background-position用于改变图像的位置，可以用属性值，例如:right top等等，或者x y百分比表示

4.text的属性

color：设置文字的颜色，可以用十进制，rgb值，还有颜色的名称例如：red等等

text-align：center left justify（通过调整字母，单词的间距，让两端的文字对齐）

文字修饰，text-decoration: overline,line-through,under-line 分别是上端中部以及下划线

文字转换：p.uppercase 将所有字母都转换为大写字母

p.lowercase 将所有字母都转换为小写字母

p.capitalize 将所有单词的首字母转换为大写字母

文本缩进：text-indent： 50px 让首行的文字缩进

另外：letter-spacing 用于字母之间的间距.line-height :是指行高，行之间的间距

direction：用于文字的书写方向。word-spacing是指单词之间的间距

vertical-align 设置元素的对齐方式 text-shadow 添加文本阴影

unicode-bidi 用于设置或者返回文本是否被重写

5.fonts属性

css的字型，可以通过font-family 来设置，如果字体系列超过一个字需要用引号。

如：font-family:Times; font-family:"宋体";

还有一些后背机制，是指如果浏览器不支持第一种字体则会尝试下一种字体。

如：p{font-family:"Times New Roman",Times,serif;}

font-style用于设置字体样式，比如说font-style:normal italic(斜i体) oblique（字体倾斜）

利用font-size来设置大小，单位一般用 px 。px是像素的意思，还有用百分比等，之后再做比较。en=px/16

利用font-weight来调节字体粗细。

6.链接样式

这个主要学习的就是，当鼠标在连接上，如划过等等变化样式

a:link {background-color:#B2FF99;} 原本的颜色
a:visited {background-color:#FFFF85;} 访问过后的颜色，颜色不变，hover也不起作用
a:hover {background-color:#FF704D;} 鼠标滑过的颜色，hover必须在visited和link后面才有效果
a:active {background-color:#FF704D;} 鼠标被点击与释放之间发生的事件，active必须在hover后面才有效果

7.有序列表

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

使用这些东西，让标志不同。

list-style-image: url('sqpurple.gif'); 还可以用list-style-image来改变标签图案

例子：

ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

例子解释：

首先将ul设置成没有列表项标记，再设置填充和编剧为0.

再设置ul中的li，设置图像的url，设置不平铺，设置位置，还有边距

8.表格

（1）设置边框

table, th, td
{
border: 1px solid black;
}

为什么要table,th,td呢，是这样的：table只是一个大方框，th表示表头的框，td是指每个框的框

边框的border可以隐藏用 boder-collpase:collpase;进行隐藏，这样就是直接的实线。

9.css盒子模型

从内到外分别是：content,padding,border,margin分别是需要呈现盒子的东西，内边距，边框，margin

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

border-style：

dotted：定义一个点线框 dashed:定义一个虚线框 solid：定义一个实线边界

double：定义两个边界，两个边界的宽度和border-width的值相同

groove:定义3d沟槽。ridge：定义3d脊边界。inset：定义一个3d的嵌入边框。outset定义一个3d突出边框

border-width：设置边框的指定宽度。

border-color：边框颜色

可以在border与style中间加top,right,bottom.left

border-style设置边框的顺序也是上右下左，然后三个参数是，上（左右）下

两个参数：上下左右。一个参数是上右下左都是这个参数。

边框简写属性：可以是border:5px solid green 等效于 solid 5px green

同理可以用同样的原理设置border-color 上右下左

由一个表格的例子引出了优先级的问题，后面再说。

除了border还有outline，用法和border差不多，都是outline outline-color outline-style outline-width

10.margin

外边距是看不到的，透明的。margin可以使用负值，这样的话可以重叠内容。

很好的例子：

实例图：

黄色的底可以看出内边距加content，外边的就是margin

margin的百分比差不多，就是以容器为标准，或者以浏览器显示页面的标准。

11.padding 也叫做填充

边框与元素之间的空间。

padding设置也和margin差不多。

12.css分组和嵌套选择器

h1,h2,h3{}这样可以直接将三个标签连在一起。

嵌套选择器，比如说为所有p元素制定一个样式，为所有元素指定一个class=“marked”的样式，并且用于class=“标记“，类内的p元素指定第三个样式：

p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

为所有的p元素都制定了颜色为蓝色，居中的样式。为.marked的类设定背景颜色，为.marked类中的p元素专门设定专门的字体颜色。就酱！！

13.css尺寸

设定某个标签的类，比如说img的类，可以是：img.red{},这样的话就是img这个标签下有一个red的类。

min max的width 还有height 这样的话可以限制元素

14.利用visibility:hidden;可以设置元素的可见性，还有比如说h1，设置不同的class，隐藏不同的标签。

但是用visibility还是会占用空间。

但是用display不会。如：display:none;

同样的display还有多种属性。常见的还有inline 属性，可以让很多项在同一行显示，比如说两行字

比如说 ul的显示，这样就可以做横向的导航栏了。

display：block；可以让标签变成块元素，例如让span{display:block}这样的话表象上就是加了换行符。

还有一个collpase的属性，会让元素消失。

15.positioning 定位

css定位，元素可以使用的顶部，底部，左侧，右侧属性定位。然而这些属性无法工作，除非先设定position属性。

static静态定位，静态定位的元素不回收top等属性的影响。

fixed定位，元素的位置相对于浏览器是固定位置。即使窗口是滚动的他也不会移动。原本以为和absolute一样，但是fixed是不会改变文本的

不会折叠等等不会因为滚动而改变。

例如：p{position:fixed; top:30px;right:40px;} 这样就定位在离上面30px，离right5px的地方。

相对的定位：relative。比如说p{positon ：relative；left：-20px；}相对其正常位置，往左往右，往上往下偏。

决定定位：相对于父元素，要么相对于html。直接是定位。Absolutely定位使元素的位置与文档流无关，因此不占据空间。

Absolutely定位的元素和其他元素重叠。

16.运用z-index属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

z-index:-1 数字越大，显示级别越高，也就是越在上面。

17.裁剪元素的外形：

clip裁剪只能裁剪绝对定位的元素：absolute,fixed.

格式：clip:rect(a,b,c,d) abcd分别代表上右下左，裁剪的边距

overflow主要用于元素内溢出的处理：

div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}

放在一个小容器里，让overflow设置scroll 或者 hidden 处理溢出的文字。设置滚动或者直接隐藏。

还可以设置auto属性，让浏览器自行处理。

更改光标：

利用cursor来改变鼠标在元素上的形状。

具体属性，主要的几个，十字移动：move。resize也就是一字形：可以指定方向，用英文首字母比如南：s-resize

18.float 浮动

元素尽量会根据属性值，往设定的方向靠。

格式比如说，设定img{float：right；} 可以悬浮在文字中，还可以设置margin来调节与文字围绕的距离。

比如说多个浮动的元素在一行上，会根据窗口大小等等，排列。

清除浮动，使用clear，指定元素哪一方不出现元素，属性有：right left both

再次确定：padding是在边框内的，也就是说在边框内表示填充。

让标题和图片一起，可以添加一个容器，来让标题和容器在一起。

19.水平对齐

使用margin:auto 是居中的。

20.css组合选择符

(1)后代选择器（作用于该标签的所有后代）

后代选择器匹配所有指定元素的后代元素，所有<p>元素插入到<div>元素

例如：

div p{background:yellow;}

(2)子元素选择器（作用于第一个的后代）

与后代选择器，字元素选择器只能选择作为某元素字子元素的元素。

div>p{background:yellow;}

(3)相邻兄弟选择器

div+p{background-color:yellow;}

即div要和p紧连着，并且要有相同的父元素的p才有这个样式

(4)普通相邻兄弟选择器

div~p{background-color:yellow;}

在div后面的p，都会有这个样式。

21.css伪类用于添加一些选择器的特殊效果

selector:pseudo-class {property:value;}

selector.class:pseudo-class {property:value;}

例如anchor伪类：

a:lnk{color:red;}这个意思是这个链接在原本是红色的

伪类是可以与类一起用的。

a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax.html">CSS Syntax</a>

first-child 伪类来选择元素的第一个子元素

这个伪类可以用于选择第一元素，例如p:first-child{color:blue;}

这个就是寻找html中第一个p，让它的内容颜色变成蓝色。

p > i:first-child
{
color:blue;
}

这个的意思是，选择页面中第一个p的子元素i，让它的颜色变成蓝色。

也可以用后代选择器，例如：p：first-child i 第一个p中的所有i

lang伪类

22.伪元素

first-letter选择文本的第一个字符

伪元素同样可以用于css类

p.article:first-letter

:befor伪元素,同理after

可以在每一个元素钱插入新内容，比如说插入图片

h1:before{content:url(smiley.gif)}

23.导航栏

用ul来定义导航栏，从列表中删除边距和填充

List-style-type:none;

基本下拉菜单

这个方法，主要是把下拉的菜单先隐藏，再用伪元素：例如p：hover a{diaplay：block；}

做一个作业，做一个下拉的导航栏！！！！

24.图像透明度

透明度改变：opacity

复习：设置background:url(dsd) repeat;设置背景图片。

25.图像拼合

<img class="home" src="img_trans.gif" /> -因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像
宽度：46px;高度：44px; - 定义我们使用的那部分图像
background:url(img_navsprites.gif) 0 0; - 定义背景图像和它的位置（左0px，顶部0px）

26.css媒体类型

@media的规则允许同样的样式为不同媒体设置不同的样式。

例子：如果在浏览器上显示，则是14px的verdana字体样式，但是如果是页面打印将是10px的times字体。

<style>@media screen{p.test {font-family:verdana,sans-serif;font-size:14px;}}@media print{p.test {font-family:times,serif;font-size:10px;}}@media screen,print{p.test {font-weight:bold;}}</style>

font-weight：bold；在之前有一点点提示到就是这个属性会字体加粗。

27.css属性选择器

具有特定属性的html元素样式

[title]
{
color:blue;
}
</style>
</head>
<body>
<h2>Will apply to:</h2>
<h1 title="Hello world">Hello world</h1>
<a title="w3cschool" href="http://w3cschool.cn">w3cschool</a>

将右tile这个属性的标签全部变成蓝色

属性包含特定的值，然后设置成相应的样式。

例子：[title~=hello] { color:blue; }

用特定属性设置表单：

input[type="text"]
{
width:150px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:120px;
margin-left:35px;
display:block;
}

28.留坑，一天做一个学一个实战的样式。

11.24：

阅读全文

0 0