CSS样式+选择器+字体样式
程序员文章站
2022-05-01 14:21:43
...
行内样式:
直接将style属性写在标签里面,不建议使用
<p style="display:inline-block;width:200px"></p>
内部样式:
将style标签写在head标签里面
<style>
div{
display: inline-block;
width:200px;
}
</style>
引入外部样式
<head>
<link rel="stylesheet" href="main.css"/>
</head>
Main.css
@charset "utf-8"
选择器
标签选择器
选中所有的同类标签
div{}
类选择器(class)
通过 . 语法来选择
.div{}
<div class="div"></div>
id选择器
通过#语法来选择
#nav{}
<div id="div"></div>
后代选择器
通过中间空格来选择控制所有后代,如果用>隔开,那么就只影 响直系。
div>span
<div>
<span></span>
</div>
交集选择器
同时满足所有条件,不常用
div.c1{}
<div>
<span class="c1"></span> √
<span class="c1"></span> √
<span class="c2"></span> ×
</div>
并集选择器
有满足的条件即可
#img1,.img{}
<div id="img1"></div> √
<div class="img1"></div> √
<div class="img1"></div> √
优先级: id>类>标签
字体样式
谷歌浏览器默认16号字体,最小显示12号字体
代码 | 用法 |
---|---|
font-weight:bold | 字体加粗 |
text-align: center | 文本水平居中 |
font-style: italic | 斜体 |
line-height:10px | 通过行高进行垂直居中 |
letter-spacing: 10px | 字符间距 |
text-decoration: underline0 | 文本修饰下划线 |
text-decoration: overline | 上划线 |
text-decoration:line-through; | 中划线 |
text-decoration: none | 去掉线 |
text-indent: | 文本缩进 |
-webkit-text-stroke: 1px red | 文本描边 |
text-shadow: 10px 5px 1px black(右移动10;下移动5;字体清晰度-越小越清晰;阴影颜色) | 文字阴影 |
border:1px soild red | 边框粗细 实心 颜色 |
上一篇: CSS样式——选择器
下一篇: CSS样式选择器
推荐阅读
-
Bootstrap.css与layDate日期选择样式起冲突的解决办法
-
css样式和选择器的使用方法
-
可以使text显示为label的样式吗_html/css_WEB-ITnose
-
【急】如何快速高效地复制某个网页的一部分?使这一部分的布局与样式和原网站一样_html/css_WEB-ITnose
-
JQuery Validator自定义错误样式及CSS校验(动态元素)
-
应该怎样进一步学习写样式_html/css_WEB-ITnose
-
怎样用纯html和css更改默认的上传文件按钮样式
-
一个纯CSS写的登录的样式_html/css_WEB-ITnose
-
css3中检验表单的required,focus,valid和invalid样式
-
元素的样式来源 基本选择器/上下文选择器 选择器的权重