css笔记

最新推荐文章于 2024-06-13 11:45:00 发布

zj19880814

最新推荐文章于 2024-06-13 11:45:00 发布

阅读量124

点赞数

分类专栏： Web 文章标签： CSS 百度浏览器 HTML

本文链接：https://blog.csdn.net/zj19880814/article/details/83556857

版权

Web 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

A.样式规则的选择器
1.html selector ：直接写html标签，如p,tr,td,
如： p{
color:red;
font-size:19px
}

div{
color:green;
font-size:1cm;

}

2.class selector
<style>(这种方式只有p标签可以用）
p.one{color:#FF3366;font-size:1cm;background:green;}
p.two{color:green;font-size:1cm;background:black;}
p.three{color:green;font-size:1cm;background:blue;}
</style>
</head>
<body>
<p class="one">whsisdfssdfsd</p>
<p class="two">fsdfasdfasd</p>
<p class="three">sdfasdfadf</p>
<p class="one">sdfsadfhooajd</p>
</body>

<style>（这种方式所有的标签都可以用）
.one{color:#FF3366;font-size:1cm;background:green;}
.two{color:green;font-size:1cm;background:black;}
.three{color:green;font-size:1cm;background:blue;}
</style>
</head>
<body>
<h1 class="three">sfdsdfgwefedfdsfs</h1>
<p class="one">whsisdfssdfsd</p>
<p class="two">fsdfasdfasd</p>
<div class="three">sdfasdfadf</p>
<div class="one">sdfsadfhooajd</p>
</body>

3.id selector
在一个页面id是不能重复的
如：
<style>（）
#one{color:#FF3366;font-size:1cm;background:green;}
#two{color:green;font-size:1cm;background:black;}
#three{color:green;font-size:1cm;background:blue;}
</style>
</head>
<body>
<h1 id="three">sfdsdfgwefedfdsfs</h1>
<p id="one">whsisdfssdfsd</p>
<p id="two">fsdfasdfasd</p>
<div id="three">sdfasdfadf</p>
<div id="one">sdfsadfhooajd</p>
</body>

4.关联选择器（用空格关联如：center p em）
<style>(center,p,em标签少一个css都不会生效）
center p em{background-color:#006633; font-size:36px; background-position:center}
</style>
</head>
<body>
<center>
<p>
<em>武汉黄鹤楼</em>
</p>
</center>

<style>(此种为错误的，少了一个p标签）
center p em{background-color:#006633; font-size:36px; background-position:center}
</style>
</head>
<body>
<center>

<em>武汉黄鹤楼</em>

</center>

<style>
.one .two em{background-color:#006633; font-size:36px;}

</style>
</head>
<body>
<center class="one">
<h1 class="two">
<em>武汉黄鹤楼</em>
</h1>
</center>

<style>
#one #two em{background-color:#006633; font-size:36px;}

</style>
</head>
<body>
<center id="one">
<h1 id="two">
<em>武汉黄鹤楼</em>
</h1>
</center>
</body>

<style>
#one .two em{background-color:#006633; font-size:36px;}

</style>
</head>
<body>
<center id="one">
<h1 class="two">
<em>武汉黄鹤楼</em>
</h1>
</center>
</body>

5.组合选择器

<style>（两个标签任意组合）
p,div,.one,#class{background-color:#003399; font-size:18px;}

</style>
</head>
<body>
<p>wfdsdf</div>
<div>wuhandfsdf</p>
<hr />
<p class="one">fsdfsadfasd</div>
</body>

6.伪元素选择器
<style>
a:link { background-color:#003333; font-size: 24px}
a:hover { background-color:#669966; font-size:14px}
a:visited {background-color:#CC3399; font-size:36px}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>

Filter(css滤镜)
只有有边界元素才能用滤镜
Filter是<div>的一个属性
<div style=”width=:120;height:20;background-color=red;
Filter:alpha(opacity=80) blur(add=5,direction=135)”>
..alpha(opacity=?,finishopacity=?,style=?,startx=?,starty=?,finish=?,finishx=?,finishy=?)
..alpha:控制元素与背景的混合程度，就是元素的透明度
..opacity:透明度的级别1到100之间，1为完全透明，100完全不透明。
….finishopacity:设置渐变透明度，结束时的透明度
…style:设置渐变透明的样式
…startx,staryx,finish,finishy，渐变开始于结束的坐标

Blendtrans(duration=?)设置淡入与淡出效果，duration设置淡入与淡出的时间值
Blur(add=?,direction=?,strength=?)设置模糊效果
Chroma(color=?)设定某种颜色为透明，就是过滤某种颜色
Dropshadow(color=?,offx=?,offy=?,positive=?)建立阴影效果
Color设置阴影的颜色，offx设置阴影在水平方向上的偏移量，offy设置阴影在垂直方向上的便宜量，positive:值为true,表示建立外部阴影，为false表示建立内部阴影
Fliph,flipv:将元素水平方向上，将元素垂直方向上反转不用设置子参数反转图像的
Gray:去掉元素的色彩，黑白图像。不用设置子参数
Invert:反转图像的颜色，类似底片的效果，不用设置子参数
Light:设置光源效果，模仿光源在物体上的投影效果，必须结合js使用，不用设置子数
Xray:显示图片的轮廓，不用设置子参数
Glow(color=?,strength=?),mask(color=?)设置元素边缘类似发光的效果。
发光的强度元素表面形成一个遮罩，效果类似有色眼镜看物体

Revealtrans(duration=?,transition=?)建立元素初始转换时的效果

指定切换的时间切换的方式

Shadow(color=?direction)建立阴影效果
Wave(add=?,freq=?,lightstrength=?,phase=?,strength=?)建立波纹的效果

是否扭曲波纹的频率波纹的光照强度波浪的起始上角波浪摇摆的幅度

CSS-P(cascading style sheets positioning)
Css-p是css的一个扩展，它可用来控制人和网页元素在浏览器文档窗口中的位置
*Position
设置值：absolute绝对定位，relative相对定位，static用html定位
*left,top,width,height
*z-index:设置元素的层叠位置

边缘
padding为内边距
padding-left:2cm;
padding-right:2cm;
padding-top:2cm;
padding-bottom:2cm

margin为外边距
*margin(margin-top,margin-right,margin-bottom,margin-left)

*设置边框的宽度border-width(border-top-width, border-right-width, border-bottom-width, border-left-width)
设置值:thin,medium,thick或数值
Border-color边框颜色(border-top-color, border-right- color, border-bottom- color, border-left- color)

*border-style边框的样式
也可以简写为：
*border(border-top,border-right,border-bottom,borer-left)
给border-top一次性赋予width,color,style.效果同border-color,border-width效果相同

列表：
* List-style-type
设置值：disc实心圆，circle空心等值
*list-style-image
如果使用了属性，则该图片会代替上面的实心圆，空心等出现在每个列表的前面。
*list-style-position
设置值：inside,outside

*list-style:是上面几个元素的简写

Cursor:设置鼠标经过时的形状
*设置值：hand手型等值

Css中的注释：
/*……………*/
并不是所有的外标签的属性都会被内标签的属性值继承，例如：<body>中的有的属性值不会被它所包含的标签继承。

*样式规则的优先级：如果内层标签与外层标签的相同属性值相同，则当浏览器解释内层标签时，以内层标签为准
Id选择器>class选择器>html标签选择器
内联样式>表嵌入样式表>链接样式表
在html中用<linke>标签中用外连接方式来使用css