css知识点

芸尚非

已于 2024-01-29 16:18:44 修改

阅读量155

点赞数

分类专栏：知识点文章标签： css css3 html

于 2021-11-02 11:28:10 首次发布

本文链接：https://blog.csdn.net/qq_36223335/article/details/121095543

版权

注释

/*这是个注释*/

选择器

/*id选择器*/
#para1
{
   
    text-align:center;
    color:red;
}

/*class选择器*/
.center {
   text-align:center;}

/*属性选择器*/
[title]
{
   
    color:blue;
}
[title=runoob]
{
   
    border:5px solid green;
}
[title~=hello] {
    color:blue; } /*包含hello*/
[lang|=en] /*指定lang*/
{
   
	color:blue;
}
<h2>将适用:</h2>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<hr>
<h2>将不适用:</h2>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
</body>

/*分组，并列关系*/
h1,h2,p
{
   
    color:green;
}

/*嵌套选择器*/
.marked p
{
   
    color:white;
}
p.marked{
   
    text-decoration:underline;
}

后代选择器(以空格     分隔)
div p
{
   
  background-color:yellow;
}
子元素选择器(以大于 > 号分隔）
div>p
{
   
  background-color:yellow;
}
相邻兄弟选择器（以加号 + 分隔）
div+p
{
   
  background-color:yellow;
}
普通兄弟选择器（以波浪号 ～ 分隔） 后续兄弟选择器选取所有指定元素之后的相邻兄弟元素
div~p
{
   
  background-color:yellow;
}

引入样式表

外部样式表(External style sheet)

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

内部样式表(Internal style sheet)

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

内联样式(Inline style)

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

背景

background-color
h1 {
   background-color:#6495ed;}

background-image
body {
   background-image:url('paper.gif');}
body {
   background-image:url(img_flwr.gif),url(img_tree.gif);} /*多个图像*/

background-repeat
background-repeat:repeat-x;

background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。
background-attachment:fixed; 

background-position 设置背景图像的起始位置。
p {
   background-position:center;}

background-size 背景大小
div
{
   
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
}

background-origin 背景图片填充位置 
content-box, padding-box,和 border-box区域内可以放置背景图像
div
{
   
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
}

background-clip 背景剪裁属性是从指定位置开始绘制
#example1 {
    
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box; 
}

文本

color
h2 {
   color:rgb(255,0,0);}

text-align 文本对齐方式
h1 {
   text-align:center;}

text-decoration 用来设置或删除文本的装饰。
a {
   text-decoration:none;} /*删除链接的下划线*/

text-transform 用来指定在一个文本中的大写和小写字母。
a {
   text-transform:capitalize;} /*每个单词的首字母大写。*/

text-indent 文本缩进
p {
   text-indent:50px;}

direction 文本方向
p {
   direction:rtl;} /*文本方向从右到左。*/

letter-spacing 字母间距
h1 {
   letter-spacing:2px}

line-height 文本行高
p.small {
   line-height:90%}

text-shadow 文字阴影 text-shadow: h-shadow v-shadow blur color;
p {
   text-shadow: 2px 2px #ff0000;}

vertical-align 设置一个元素的垂直对齐方式。
p {
   vertical-align:text-top;} /*把元素的顶端与父元素字体的顶端对齐*/

white-space 指定元素内的空白怎样处理。
p {
   white-space:nowrap;} /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/

text-shadow 适用于文本阴影 指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色
h1
{
   
    text-shadow: 5px 5px 5px #FF0000;
}

word-wrap 换行 自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字
p {
   word-wrap:break-word;}

word-break 换行规则
p.test1 {
   
    word-break: keep-all;
}
 
p.test2 {
   
    word-break: break-all;
}

text-overflow 指定当文本溢出包含它的元素时，应该如何显示 clip|ellipsis|string|initial|inherit;
div.test {
   
    text-overflow:ellipsis;
}

text-outline 文本轮廓
p.test
{
   
text-outline: 2px 2px #ff0000;
}

text-emphasis 文本重点标记
p
{
   
    text-emphasis: filled red;
    -webkit-text-emphasis: filled red;
}

字体

font-family 字体
p{
   font-family:"Times New Roman", Times, serif;} /* 设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。 */

font-style 正常/斜体/倾斜的文字
p.italic {
   font-style:italic;} /*斜体 */

font-size 字体大小 1em和当前字体大小相等。在浏览器中默认的文字大小是16px。为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。
h1 {
   font-size:40px;}
h1 {
   font-size:2.5em;} /* 40px/16=2.5em */

font-variant 把段落设置为小型大写字母字体：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小
p {
   font-variant:small-caps;}

font-weight 字体粗细
p.thick {
   font-weight:bold;}
p.thicker {
   font-weight:900;}

@font-face 自定义字体
@font-face
{
   
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}
div
{
   
    font-family:myFirstFont;
}

@font-face /*粗体*/
{
   
    font-family: myFirstFont

最低0.47元/天解锁文章

芸尚非

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css知识点

注释/*这是个注释*/选择器/*id选择器*/#para1{ text-align:center; color:red;}/*class选择器*/.center {text-align:center;}/*分组，并列关系*/h1,h2,p{ color:green;}/*嵌套选择器*/.marked p{ color:white;}p.marked{ text-decoration:underline;}引入样式表
复制链接

扫一扫