Css基础内容
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8" />
? ? <title>CSS</title>
? ? <!-- <link rel="stylesheet" href="Html5与Css3\CSS\my.css"> -->
? ? <!-- link引入外部样式表：rel：关系.样式表，敲完link直接按回车就行 -->
? ? <!-- <style>
? ? ? ? /* 写css代码 */
? ? ? ? ?p{
? ? ? ? ? ? color:red
? ? ? ? }
? ? </style> -->
</head>
<body>
? ? <!-- css的定义：css就是层叠样式表是一种样式表语言，用来描述html文档的呈现美化内容
? ? 书写位置：title标签下方添加style双标签，style标签里面书写css代码
? ? 规则：选择器{属性名：属性值;}
? ? -->
? ? <p>体验css</p>
? ? <!-- <div style='color:red;font-size:20px'>这是div标签</div> -->
? ? ?<!--用css把段落变红 ?-->
? ? ?<!-- CSS引入方式
? ? 内部样式表：css代码写在style标签里面
? ? 外部样式表：css代码写在单独的css文件中（.css），在html使用link标签引入
? ? <link rel = 'stylesheet'href='./my.css'>
? ?
? ? 行内样式：配合JavaScript使用，写在标签的style属性值里
? ? <div style='color:red;font-size:20px'>这是div标签</div>
? ? -->
? ? <!-- 选择器
? ? 作用：查找标签，设置样式
? ?
? ? 1.标签选择器：使用标签名作为选择器，选中同名标签设置相同样式
? ? 2.类选择器：查找标签，差异化设置标签的显示效果
? ? 特点：一个类选择器可以给多个标签使用，一个标签可以使用多个类名，类名用空格隔开
? ? 注意：类名自定义，尽量用英文命名
? ? 开发习惯：类名见面知意，多个单词用-连接
? ? 步骤：定义类选择器 .类名
? ? 使用类选择器 标签添加class='类名'
? ? <style>
? ? ? ? .red{
? ? ? ? ? ? color:red;
? ? ? ? }
? ? </style>
? ? 如<div class='red'>变红</div>
? ? 3.id选择器：
? ? 查找标签，差异化设置标签的显示效果
? ? id选择器一般配合JavaScript使用，很少用来设置css样式
? ? 步骤：
? ? 定义id选择器：#id名
? ? 使用id选择器：标签添加id='id名'
? ? #id{
? ? ? ? color:red;
? ? }
? ? 4.通配符选择器：
? ? 通配符选择器：*，不需要调用，浏览器自动查找页面所以标签，设置相同的样式
? ? *{
? ? ? ? color：red;
? ? }
? ? -->
? ? <!-- 画盒子
? ? 属性：
? ? width：宽度
? ? height：高度
? ? background-color：背景色
? ? -->
? ? <!-- 网页的文字效果
? ? 字体大小：font-size
? ? 属性值：文字尺寸，常用单位是px
? ? 属性必须有单位，否则不生效
? ? {
? ? ? ? font-size：30px;
? ? }
? ?
? ? 字体粗细：font-weight
? ? 属性值：数字或关键字
? ? 正常：normal / 400
? ? 加粗：bold / 700
? ? {
? ? ? ? font-weight：400;
? ? }
? ? 字体倾斜：font-style
? ? 属性值：
? ? 正常：normal
? ? .text
? ? {
? ? color:red;
? ? font-size: 30px;
? ? font-style: normal;
? ? }
? ? .text1
? ? {
? ? color:blue;
? ? font-weight:400;
? ? font-style:italic;
? ? }
? ?
? ? 行高：line-height
? ? 行高的测量方法：从一行文字的最顶端量到下一行文字的最顶端
? ? 作用：设置多行文本的间距
? ? 属性名：line-height
? ? 属性值：
? ? 数字+px
? ? 数字(当前标签font-size属性值的倍数)
? ?
? ? .text2
? ? {
? ? line-height: 50px;
? ? }
? ? 垂直居中技巧：行高属性值等于盒子高度属性值（只适用于单行文字）
? ? 字体族：font-family
? ? 属性值：字体名
? ? 可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右依次查找，属性最后设置一个字体族名，网页开发建议使用五衬线字体
? ? .text2{
? ? font-family: 楷体;;
? ? }
? ? 字体复合属性：font
? ? 使用场景：设置网页文字公共样式
? ? 复合属性：属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开
? ? font：是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）
? ? 注意：字号和字体值必须书写，否则font属性不生效
? ? div{
? ? ? ? font：italic 700 30px/2 楷体
? ? }
? ? 文本缩进：text-indent
? ? 属性值：
? ? 数字+px
? ? 数字+em（推荐：1em = 当前标签的字号大小）
? ? p{
? ? ? ? text-indent：2em;
? ? }
? ? 文本对齐：text-align
? ? 作用：控制内容水平对齐方式
? ? 居中的是文字内容而不是标签
? ? 属性值：
? ? left：左对齐
? ? center：居中对齐
? ? right：右对齐
? ? {
? ? ? ? text-align:center;
? ? }
? ? 水平对齐方式-图片
? ? text-align本质是控制内容的对齐方式，属性要设置给内容的父级
? ? <style>
? ? ? ? div{
? ? ? ? ? ? text-align:center;
? ? ? ? }
? ? </style>
? ? <div>
? ? ? ? <img>
? ? </div>
? ? 修饰线：text-decoration
? ? 属性值：
? ? none：去掉下划线
? ? underline：下划线
? ? line-through:删除线
? ? overline：上划线
? ? 颜色：color
? ? 属性值：
? ? 颜色关键字：颜色英文单词：red，green，blue等
? ? rgb表示法：rgb（r，g，b）：r，g，b表示红绿蓝三原色，取值：0-255
? ? rgba表示法：rgb（r，g，b，a）：a表示透明度,取值：0-1
? ? 十六进制表示法：#RRGGBB：#000000，#ffcc00，简写：#000，#fc0
? ? a{
? ? text-decoration: none;
? ? /* color:red; */
? ? /* color:rgb(0, 100, 0); */
? ? /* color:rgba(1, 0, 0, 0.3); */
? ? color:#ff0000;
}
? ? -->
? ? <!--调试工具
? ? 作用：检查，调试代码；帮助程序员发现代码问题，解决问题
? ? 1.打开调试工具
? ? 浏览器窗口任意位置/选中标签 ——>鼠标右键——>检查
? ? F12
? ? 2.使用调试工具
? ? 细节：
? ? 1.如果是错误的属性，有黄色感叹号
? ? 2.css属性的前面有多选框，如果勾选，这个属性生效，如果没有勾选这个属性不生效
? ? -->
? ? <p class="text">测试下划线</p>
? ? <p class="text1">测试2删除线</p>
? ? <p class="text2">上划线aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
? ? aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
? ? <a href="#">没有下划线</a>
</body>
</html>
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！