前端基础之css样式

最新推荐文章于 2022-06-11 14:32:34 发布

CodeWhite7

最新推荐文章于 2022-06-11 14:32:34 发布

阅读量267

点赞数 1

分类专栏： JavaWeb 文章标签： css html web javascript java

本文链接：https://blog.csdn.net/weixin_46146269/article/details/106116708

版权

JavaWeb 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Css基础

CSS语法规则：选择器 { key1: value1; key2:value2; }

注意：CSS代码中空格是不被解析的，花括号和分号前后的空格可有可无。

如对h2标签的控制：h2 { font-size:20px;color:red;}

CSS注释：/* */ 和java的多行注释差不多。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fV0FT5rE-1589427716044)(C:\Users\JUN\AppData\Roaming\Typora\typora-user-images\image-20200514103844663.png)]$

如何引入CSS样式？

行内式： 直接在标签里加入style属性来设置样式。

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

内嵌式： 在html文档的<head>头部中,使用<style>定义。

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

链入式： 所有样式在.css文件里，通过引用.css文件到HTML文档中。

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

CSS基础选择器

1.标记选择器：

标记名{ key1: value1; key2:value2; }
如：p{font-size:12px; color:#666;}

2.类选择器： 通过引用class达到效果

.类名{ key1: value1; key2:value2; }
.center {text-align: center}
<h1 class="center">这个文本将居中</h1>

3.id选择器： 通过引用id达到效果

#id名 { key1: value1; key2:value2; }
如：#red {color:red;}
<p id="red">这个段落是红色。</p>

4.通配符选择器： 所标签都应用此样式。

* { key1: value1; key2:value2; }
如：*{ margin:0; padding:0;}

5.标签指定式选择器： 由两个选择器构成（选择器间不得有空格）。

选择器1,选择器2 { key1: value1; key2:value2; }
如： div.class01{
            color: blue;
            font-size: 20px;
            border:  yellow 1px solid;
        }
注意点：
如：p.class01{color:blue;} /* 这个指定了只能在p标签下引用了class01才有效果 */

6.后代选择器： 标记间使用空格隔开。

外层标记 内层标记 { key1: value1; key2:value2; }
如： div strong{
            color: blue;
            font-size: 20px;
            border:  yellow 1px solid;
        }

应用：<div><strong>div标签id01</strong></div>/* 当<strong>嵌套在div里才能够使用 */

7.并集选择器： 向多个选择器应用指定的样式。

选择器1,选择器2，选择器3 { key1: value1; key2:value2; }
如： #id01,.class01,div {
            color: blue;
            font-size: 20px;
            border:  yellow 1px solid;
        }

文本样式属性

1.font-size1:字号大小设置字号大小

 div{
            font-size: 14px;
        }

2.font-family:字体 设置文本字体

 div{
            font-family: 微软雅黑;
        }

3.font-weight:字体粗细 设置字体粗细

div{
            font-weight: bold;
        }

4.font-style:字体风格 定义字体的风格

 div{
            font-style: normal;
        }

5.font:综合设置字体样式 综合的设置字体样式

语法：选择器{ font: font-style font-weight font-size/line-height font-family;}
如：
div{
            font:italic small-caps bold 3px/40px Arial,"宋体";
        }
相当于：
   div {
            font-family: Arial, "宋体";
            font-size: 3px;
            font-style: italic;
            font-weight: bold;
            font-variant: small-caps;
            line-height: 40px;
        }

6.@font-face css3的属性，可以选择指定的服务器字体

 @font-face {
            font-family: 字体名称;
            src: url("字体链接");
        }

7.选择器{word-wap:属性值} 实现内部换行

 div {
            word-wrap: normal;
        }

文本外观属性

     div {
            color: #3d6cb0; "设置文本颜色"
            
            initial-letter: normal; "设置字间距"
            
            word-spacing: 12px; "设置单词间距"
            
            line-height: normal; "设置行间距"
            
            text-transform: capitalize; "控制英文字符的大小写"
            
            text-decoration: #3d6cb0; "设置文本的装饰，下划线等等"
            
            text-align: center; "文本内容的水平对齐方式"
            
            text-indent: each-line; "设置文本首行缩进"
            
            white-space: normal; "空白符处理 "
            
            text-shadow: #3d6cb0; "设置文本阴影效果"
            
            text-overflow: clip; "设置文本标示对象内溢出的文本"
        }

优先级顺序

下列是一份优先级逐级增加的选择器列表：

通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式

表格样式

设置表格样式：

table, th, td
{
    border: 1px solid black;
}
lip; "设置文本标示对象内溢出的文本"
        }

优先级顺序

下列是一份优先级逐级增加的选择器列表：

通用选择器（*）
元素(类型)选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式

表格样式

设置表格样式：

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

CodeWhite7

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础之css样式

目录Css基础如何引入CSS样式？CSS基础选择器文本样式属性文本外观属性优先级顺序表格样式优先级顺序表格样式Css基础CSS语法规则：选择器 { key1: value1; key2:value2; }注意：CSS代码中空格是不被解析的，花括号和分号前后的空格可有可无。如对h2标签的控制：h2 { font-size:20px;color:red;}CSS注释：/* */ 和java的多行注释差不多。如何引入CSS样式？行内式：直接在标签里加入style属性来设置样式。<p s
复制链接

扫一扫