css入门1（w3cschool学习笔记1）

最新推荐文章于 2019-12-09 11:40:10 发布

yogima

最新推荐文章于 2019-12-09 11:40:10 发布

阅读量257

点赞数

分类专栏： java web 文章标签： css 入门 w3cschool

本文链接：https://blog.csdn.net/yogima/article/details/79613030

版权

java web 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

id和class选择器

id和class值均不能以数字开头（在 Mozilla/Firefox 浏览器中不起作用）

id选择器：以 “#” 来定义。不同的标签id值不能相同。

/*适用于id = "para1"*/
#para1
{
text-align:center;
color:red;
}

class选择器：以”.”定义。不同的标签class值可以相同。

.center {text-align:center;}

也可以指定特定的HTML元素使用class，例如所有的p元素：

p 
{ 
color:red; 
text-align:center; 
}

颜色值的写法

p { color: red; } == p { color: #ff0000; } == p { color: rgb(255,0,0); } == p { color: rgb(100%,0%,0%); }
注意：当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号。但是在其他的情况下不需要这么做，比如当尺寸为 0 像素时，0 之后不需要使用 px 单位。

样式表（外部、内部、内联）

外部样式表：样式需要应用于很多页面，样式表以.css为拓展名。
需要在头部用标签链接到样式表。
例：

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

mystyle.css：

hr {color:sienna;}           
p {margin-left:20px;}            
body {background-image:url(/images/back40.gif);}

注：不要在属性值与单位之间留有空格。例如使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它仅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作。

内部样式表：单个文档需要特殊的样式。
在头部用<style>标签定义。比如说在上文讲id和class选择器的时候用的就是内部样式表。
例：

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式表：当样式仅需要在一个元素上应用一次时。

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

优先级

内联样式表>内部样式表>外部样式表>浏览器缺省样式
但是比如同时拥有内联和外部样式，相同的属性使用内联样式表的属性值，而外部样式独有的属性（内联样式表没有该属性）依旧存在（使用外部样式表的值）。

下列是一份优先级逐级增加的选择器列表，其中数字 7 拥有最高的优先权：
1.通用选择器（*）
2.元素(类型)选择器
3.类选择器
4.属性选择器
5.伪类
6.ID 选择器
7.内联样式

!important 规则例外
当 !important 规则被应用在一个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，无论它处在声明列表中的哪里。但是使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

权重计算：内联样式表：1000； ID 选择器：100； Class 类选择器： 10； HTML 标签选择器： 1；
标签选择器指的是比如<p>、<em>这种，有冲突的话相加看看哪个比较大，当然正常人也不会故意把样式写得很复杂，还要算来算去算权重= =当权值相等时，后出现的样式表设置要优于先出现的样式表设置；继承的CSS 样式不如后来指定的CSS 样式；

背景——background

背景颜色：background-color
可以为所有元素设置背景色，包括 body 一直到 em 和 a 等行内元素。
background-color 不能继承，其默认值是 transparent。如果一个元素没有指定背景色，那么背景就是透明的，这样其父元素的背景才可见。
背景图像：background-image
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
background-repeat:repeat-y;可设置只在某一方向进行平铺（比如这里是y轴方向）
设置定位不平铺：background-repeat:no-repeat;

<style>
    body
    {
        background-image:url('paper.gif');
        background-repeat:repeat-y;
    }
</style>

background-position 属性可以改变图像在背景中的位置：关键字top、bottom、left、right 和 center；
只要保证不超过两个关键字：一个对应水平方向，另一个对应垂直方向，那么可以设置位置关键字以任何顺序出现，比如top left，left top。如果只有一个关键字，则会默认另一个关键字为 center。
background-position 属性值还可以由百分比和长度表示，例如： background-position:66% 33%; 表示以左上角为起点，将图片的中心放在距离左边2/3，距离顶端1/3的地方。而长度，例如：background-position:50px 100px;即为图片左上角距离内边距区左边50px，距离上边100px。
background-attachment属性用于固定背景图像。background-attachment:fixed.设置了fixed说明，无论怎么上下滚动页面，图片都是在页面中的同一个地方（不会消失也不会变化），而不会比如说在顶部，往下一滚，图片滚到了不可见的地方。

3.背景简写：将所有属性合并到一个属性background中
例：body {background:#ffffff url('img_tree.png') no-repeat right top;}
属性值的顺序：1.background-color 2.background-image 3.background-repeat 4.background-attachment 5.background-position
以上属性无需全部使用，可以按照实际需要使用.

4.背景图片宽高自适应：

 background-size:100% 100%

text-文本格式

text color-设置文字颜色。

body {color:blue;} 
h1 {color:#00ff00;} 
h2 {color:rgb(255,0,0);}

注：如果定义了颜色属性，就必须定义背景色属性。

2.text-align 文本对齐方式
属性值：left:左对齐；right:右对齐；center:中心对齐；justify:两端对齐；inherit:从父类继承。

3.text-decoration：文本修饰
a {text-decoration:none;}用于删除链接的下划线
h1 {text-decoration:overline;}属性值还可以是through-line或者underline；

4.text-transform：大小写转换
属性值：uppercase、lowercase、capitalize。分别对应所有字母大写、所有字母小写、所有单词首字母大写。

5.text-indent：文本缩进
p {text-indent:50px;}在这里所有p元素的第一行都可以缩进一个给定的长度。

6.word-spacing：文本间隔
p { word-spacing:30px; }——每个字或单词间的间隔为30像素
word-spacing是单词间的距离，字符之间（单词内）的距离调整用letter-spacing.
line-height:行距。p {line-height:200%;}大多数浏览器的默认行距大约是110%-120%左右。

7.text-shadow：文字阴影
h1 {text-shadow:2px 2px #FF0000;}向右偏移量、向下偏移量、颜色。

字体——font

font-family：
p{font-family:"Times New Roman", Times, serif;}属性值一般会设置几个不同字体名称作为一种”后备”机制，如果浏览器不支持第一种字体将会尝试下一种字体，字体中间用逗号分隔。如果字体系列的名称超过一个字或单词，它必须用引号，如Font Family：”宋体”。
CSS 定义了 5 种通用字体系列：Serif 字体、Sans-serif 字体、Monospace 字体、Cursive 字体、Fantasy 字体。
font-style:属性值：normal-正常字体，italic-斜体，oblique-倾斜的文字。通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样（…）。
设置字体大小：p {font-size:40px;}一般文字的默认大小为16px，但是在IE9以下版本的IE浏览器中是不支持px的，因此推荐使用em作为单位：1em=16px。（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 30px，那么1em=30px。因此其实在IE9以下时用em的确可以调整大小，但是可能会偏大或者偏小）为了解决这一问题，我们经常设置body的字体大小为100%：body {font-size:100%;}
font-weight:控制文本粗细
属性值：normal、lighter、bold或数字。font-weight:normal;=font-weight:400; lighter：300；bold：900；
font：声明所有字体属性
顺序：1.font-style。2.font-size。3.font-weight。4.font-family。（可缺省）

p.ex2
{
    font:italic bold 12px/30px Georgia,serif;
}

链接的四种状态：link、visited、hover、active

a:link - 正常，未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时（未点击）
a:active - 链接被点击的那一刻（点击时）

a:link {color:#FF0000;}      /* unvisited link */ 
a:visited {color:#00FF00;}  /* visited link */ 
a:hover {color:#FF00FF;}  /* mouse over link */ 
a:active {color:#0000FF;}  /* selected link */

可以分别设置四种状态的颜色、背景色、大小、下划线、字体等，使其点击前后以及鼠标悬浮时显示出来的状态不同。
注：a:hover 必须跟在 a:link 和 a:visited后面，a:active 必须跟在 a:hover后面。

列表样式（ul）

使用list-style-type属性：{list-style-type: upper-roman;}
常见属性值：1-4是无序列表的样式，5-9是有序列表的样式。
1. none：不使用项目符号
2. disc：实心圆
3. circle：空心圆
4. square：实心方块
5. demical：阿拉伯数字
6. lower-alpha：小写英文字母
7. upper-alpha：大写英文字母
8. lower-roman：小写罗马数字
9. upper-roman：大写罗马数字

list-style-image:作为列表项标记的图像
list-style-image: url('sqpurple.gif');

list-style：列表的缩写属性
使用缩写属性值的顺序是：1.list-style-type。2.list-style-position (设置列表中列表项标志的位置)。3.list-style-image。

yogima

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css入门1（w3cschool学习笔记1）

id和class选择器id和class值均不能以数字开头（在 Mozilla/Firefox 浏览器中不起作用）id选择器：以 “#” 来定义。不同的标签id值不能相同。/*适用于id = &quot;para1&quot;*/#para1{text-align:center;color:red;} class选择器：以”.”定义。不同的标签class值可以相同。.center...
复制链接

扫一扫

专栏目录