Css学习笔记

最新推荐文章于 2024-11-13 22:32:44 发布

杜冰林

最新推荐文章于 2024-11-13 22:32:44 发布

阅读量247

点赞数

分类专栏： HTML 文章标签： css

本文链接：https://blog.csdn.net/dubinglin/article/details/70255787

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.CSS规则

由两个主要的部分构成：

选择器，以及一条或多条声明。selector1,selector2,selector3 {declaration1;declaration2; ... declarationN }

color backgroud marginpadding font-size font-family text-align

2.li strong { font-style:italic; font-weight:normal; }

<p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>

<ol>

<li><strong>我是斜体字。这是因为strong 元素位于 li 元素内。</strong></li>

<li>我是正常的字体。</li>

</ol>

3.id选择器：可以有特定id的HTML元素指定特定的样式，用"#"来定义

#red{color:red;}<pid="red">这个段落是红色的</p>

派生选择器：#sidebarp{}应用于出现在id实在sidebar的内部的段落，派生选择器的元素可以使用多次，id选择器的元素只能使用一次

类选择器：类选择器以一个点号显示： .center{text-align:center}

<h1class="center">this heading will be center-aligned<h1>

和id一样，class也可备用做派生器： .fancy td{color:#60;}可以定义表格单元的属性，名为fancy的可能是一个表格或者一个div等

属性选择器： [title]{color:red;}所有带有title的元素设置样式

[title=w3school]{color=red；}所有title=w3school的所有元素设置样式

[title~=hello]{color=red}所有title中带有hello元素设置样式

[lang|=en] { color:red; }设置含有指定值lang属性的所有元素的设置样式，适用于连字符分割的属性值

eg:input[type="text"] {

width:150px;

display:block;

margin-bottom:10px;

background-color:yellow;

font-family: Verdana, Arial； }

4.外部样式表：和选择器一样在head中定义：

<head><link rel="stylesheettype="text/css"href="mystyle.css"></head>会送文件mystyle.css中提取文档格式。注意不要在属性和单位之间留有空格20px;

内部选择器：（标签选择器） <head><styletype="text/css">hr{color:sienna;}</style></head>

内联样式：<pstyle="color:sinna;margin-left:20px">this is aparagraph</p>

选择器的优先级：内联样式>id选择器>类选择器>标签选择器>外部样式表

5.css允许应用纯色作为背景background-color，页允许使用背景图像background-image创建相当复杂的效果，如果要背景图像进行平铺则使用background-repeat=:repeat-x||repeat-y||no-repeat;属性，可以为所有元素设置背景色

background-color允许任何合法的颜色值p{background-color: gray; padding: 20px;}或者让更小的元素a.radio {background-image:url(/i/eg_bg_07.gif);}

eg:body { background-image:url('/i/eg_bg_03.gif');

background-repeat:no-repeat;

background-position:center; }

6.定义background-position,可以用(top、bottom、left、right和 center。)；可以用(50px100px)(距离左边距50像素，距离上边距100像素，)，也可以用（66% 33%）把一个图像放在距离水平方向2/3，距离垂直方向1/3的地方

7.background-attachment:fixed;使用fixed属性防止滚动，默认是scroll，背景会随着文档滚动

CSS 选择器参考手册

选择器	描述
[attribute]	用于选取带有指定属性的元素。
[attribute=value]	用于选取带有指定属性和值的元素。
[attribute~=value]	用于选取属性值中包含指定词汇的元素。
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value]	匹配属性值以指定值开头的每个元素。
[attribute$=value]	匹配属性值以指定值结尾的每个元素。
[attribute*=value]	匹配属性值中包含指定值的每个元素。

单一关键字	等价的关键字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

CSS 背景属性

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。