DAY04_a标记访问前设置一个文本线条修饰-CSDN博客

本文链接：https://blog.csdn.net/weixin_45598725/article/details/107655097

回顾：
一 HTML标准结构
<!doctype html>

内部样式写在style标记中引入外部的css文件（外部样式）

</body>

二 CSS样式 1.css:负责页面样式构建 2.css三种使用方式 1.内联样式，行内样式 2.内部样式 3.外部样式 index.html 首页 base.css 外部样式文件样式规则语法:选择器{样式声明} 三选择器基础选择器 id选择器：定义id值所对应唯一元素元素选择器：定义元素名称所对应的这一类类选择器：定义一个或者是多个元素(谁想用都能用) 后代选择器:依托后代关系匹配元素语法：选择器1 选择器2{样式声明} 群组选择器：定义了一群选择器的公共样式语法：选择器1,选择器2{样式声明} 伪类选择器：作用：匹配元素不同状态的样式语法：选择器:伪类选择器{样式声明} a:link{color:black} 解析：a标签访问之前的字体颜色为黑色分类：链接伪类动态伪类链接伪类： :link 匹配尚未访问的超链接状态 :visited 匹配访问之后的超链接的状态练习：页面中添加一对a标记，跳转到百度，要求文本颜色点之前为黑色，访问之后颜色为蓝色(先找到a标记，再给a标记不同状态匹配样式) 动态伪类： :hover 匹配鼠标悬停在元素上时的状态 :active 匹配元素被激活时的状态 :focus匹配元素获取鼠标焦点时的状态四边框 1.边框 border:width style color; ex: border:3px solid red;(给元素添加宽度为3px的实线红色边框) 单边设置： border-bottom:width style color;下边框 border-top:上边框 border-left:左边框 border-right:右边框 2.边框倒角 border-radius:px为单位的数字或者是% ex: border-radius:50%;(大于50%也是圆) 单脚设置： border-top-left-radius,左上角 border-top-right-radius,右上角 border-bottom-left-radius,左下角 border-bottom-right-radius,右下角 ================================================================== 今日学习目标框模型浮动一框模型 1.什么是框模型凡是元素皆为框框模型：box model，盒子模型；它定义了元素框处理元素内容、内边距、外边距以及边框的计算方式默认计算方式：实际的占地宽度=左右外边距+左右的边框+左右的内边距+元素的width 实际的占地高度=上下的外边距+上下的边框+上下的内边距+元素的height 2.外边距在边框外的空白间距，一般用于指元素与元素之间的间距属性：margin 取值：1.以px为单位的数字或者% 2.auto 自动，控制块级元素在水平方向的居中对齐 3.负数,向相反方向移动单边设置： margin-top，上外边距 margin-bottom，下外边距 margin-left，左外边距 margin-right，右外边距不同数量值的设置： margin:value;表示设置四个方向的外边距 margin: v1 v2; 上下左右 margin: v1 v2 v3; 上左右下 margin: v1 v2 v3 v4; 上右下左（顺时针方向）练习：新建html文件，在页面中添加两个div,分别设置尺寸和边框(width height border)，要求第一个div在页面上居中显示，第二个div距离第一个div间距为50px，同时第二个div距离网页的左边的间距为100px 练习：用margin的简写方式完成上面的练习（休息15分钟，15:35上课） margin-top:5px; margin-left:100px; margin:50px 0px 0px 100px; 3.内边距内边距：边框与内容之间的空白距离属性:padding 取值：px为单位的数字或% 特点:增加内边距会扩大边框所包含的范围单边设置： padding-top，上内边距 padding-bottom，下内边距 padding-left，左内边距 padding-right，右内边距不同数量值设置： padding:value;上下左右四个方向的内边距 padding: v1 v2; 上下左右 padding: v1 v2 v3; 上左右下 padding: v1 v2 v3 v4; 上右下左练习：页面添加两个div，内容随意，设置尺寸和边框，其中一个div内边距为（上:40 下:50 左:20 右:20）另外一个div内边距为(上20 下30 左40 右50 )

作业：实现百度网页的页码效果（详情:作业.png图片）
(课间休息15分钟，16:45上课)

二文本格式化
1.字体属性
1.指定字体类型
属性：font-family
取值：字体1,字体2,…(“Bauhaus 93” , “黑体”,Arial)

  2.字体大小
   属性: font-size
   取值:以px为单位数字

  3.字体加粗
   属性: font-weight
   取值:bold 加粗
        normal 正常

2.文本的格式化
1.文本颜色
属性：color
取值：合法颜色值（颜色英文单词）
2.文本排列方式（水平方向）
属性：text-align
取值：left/center/right/justify(两端对齐)
3.文本的线条修饰
属性：text-decoration
取值：none 无
underkline 下划线
overline 上划线
line-through 删除线

DAY04

“相关推荐”对你有帮助么？