CSS样式以及文本属性
已于 2023-03-25 20:43:00 修改
阅读量467
收藏
点赞数
1
目录
CSS文本属性
text-align对齐方式
text-decoration装饰线
超链接下划线
CSS字体属性
CSS背景
CSS超链接
代码实现关于鼠标在链接的位置
CSS列表
CSS颜色
| 颜色 | 描述 |
| red,blue,green | 颜色名 http://www.w3school.com.cn/ |
| rgb(x,x,x) | RGB值 每个颜色分量取值0-255 红色：rgb(255,0,0) 灰色：rgb(66,66,66) |
| rgb(x%, x%, x%) | RGB 百分比值 0%-100% 红色：rgb(100%,0%,0%) |
| rgba(x,x,x,x) | RGB 值，透明度 a值：0.0（完全透明）与 1.0（完全不透明） 红色半透明：rgba(255,0,0,0.5) |
| #rrggbb | 十六进制数 红色： #ff0000 红色： #f00 去掉重复位 |
CSS文本属性
| 属性 | 描述 | 取值 |
| color | 文本颜色 | red #f00 rgb(255,0,0) |
| letter-spacing | 字符间距 | 2px -3px |
| line-height | 行高 | 14px 1.5em 120% |
| text-align | 对齐 | center left right justify |
| text-decoration | 装饰线 | None overline underline line-through |
| text-indent | 首行缩进 | 2em |
<style>
h1{letter-spacing:2px;}
h2{letter-spacing:-3px;}
</style>
<body>
<h1>标题</h1>
<h2>文本段落主要内容</h2>
</body>
效果图
<style>
p{ font-size:14px;
line-height:2em;
}
</style>text-align对齐方式
<style>
h1{text-align: center }
.date{text-align: right}
.main{text-align: justify}
</style>
<body>
<p class = "date">输入文字</p>
<p class = "main">我不输入文字</p>
</body>
在这里我们使用的是类方法的选择器
text-decoration装饰线
<style>
h1{text-decoration:overline;}
h2{text-decoration:line-through;}
h3{text-decoration:underline;}
</style>
<body>
<h1>标题1文字</h1>
<h2>标题2文字</h2>
<h3>标题3文字</h3>
</body>
超链接下划线
<style type = "text/css">
a{text-dectoration:none;}
</style>
<body>
<a href="#">#链接</a>
</body>这个是去除掉文本链接里面的下划线
CSS字体属性
| 属性 | 描述 | 取值 |
| font | 文本颜色 | font: bold 18px '幼圆' |
| Font-family | 字体系列 | 网页安全字体 font-family: "Hiragino Sans GB", "Microsoft YaHei", sans-serif; |
| Font-size | 字号 | 14px 120% |
| Font-style | 斜体 | italic |
| Font-weight | 粗体 | bold |
CSS背景
| 属性 | 描述 | 取值 |
| background | 背景：颜色 图片 repeat | url(“images/bg1.gif”) repeat-x; |
| background-color | 背景颜色 | red #f00 rgb(255,0,0) |
| background-image | 背景图片 | url（"logo.jpg"） |
| background-repeat | 重复方式 | Repeat repeat-x repeat-y no-repeat |
CSS超链接
链接的四种状态
A:link 超链接的正常状态（没有任何动作前）
A:visited 访问过的超链接状态
A:hover 光标移动到超链接上的状态
A:active选中超链接时的状态
代码实现关于鼠标在链接的位置
a:link{
text-decoration: none;
color: #09f;/*未访问*/
}
a:visted{
text-decoration: none;
color: #930;/*已访问*/
}
a:hover{
text-decoration: underline;
color: #03c;/*鼠标悬停*/
}
a:active{
text-decoration: none;
color: #03c;/*按下鼠标*/
}举个例子
<style>
a:{
font-size:22px;
}
a:hover{
font-size: 120%;
}
</style>
CSS列表
| 属性 | 描述 |
| List-style | 所有用于列表的属性 设置于一个声明中 |
| list-style-image | 为列表项标志设置图像 |
| list-style-position | 标志的位置 |
| list-style-type | 标志的类型 |
<style type="text/css">
.inside {
list-style-position: inside
}
outside {
list-style-position: outside
}
</style>
<body>
<ul class="inside">
<li>HTML——网页结构</li>
<li>CSS——网页样式</li>
<li>JS——网页交互</li>
</ul>
<ul class="outside">
<li>HTML——网页结构</li>
<li>CSS——网页样式</li>
<li>JS——网页交互</li>
</ul>
</body>
扫一扫
4326
东北师范大学
到【灌水乐园】发言
Chen11_Nenu: 得置零
weixin_51895196: 请问最后为什么要用meset函数呀，有点不太懂~
조시어: 请问有模板怎么运行啊
Chen11_Nenu: 可以的 我只是打习惯了
sunpy114: 话说这题print时没必要转换成str，输入时也不用strip()去掉input的字符串前后空格，也可以过题吧