HTML+CSS的部分属性及使用

样式表的三种引入

• 外部样式表
  link rel=“stylesheet” type=“text/css” href=“mystyle.css”
• 内部样式表
  style
• 内联样
  p style=“color:red;margin:20px”
  三种样式表的引入通常使用外部样式表和css一起

标签的三种用法

• 超链接
  百度
  超链接中会自带下划线
  可以用text-decoration-line: none;来消除下划线；
• 作为锚点
• 用来发邮件打电话等联系

链接的四种状态

• aa对象在未被访问时的样式。
• a:visited:a对象已经被访问过后的样式。
• a:hover:鼠标在其上方悬浮时的样式。
• a:active:链接被按下时候的样式。
  
  选择器

id选择器和class选择器

class选择器

id选择器

两种列表

• ul无序列表
  开头以实心圆，空心圆等
  可以用list-style-type: none;来消除前面的圆点；
• ol有序列表
  可以使用阿拉伯数字‘1,2,…’大写字母‘A,B…’小写字母‘a,b…’等表示顺序；
  可以用start规定起始顺序的序号type规定序号类型；

列表原始状态的竖状列表，可以使用float:left;来改变为水平样式

盒子模型
margin为外边距
boder为边框
padding为内边距
content为内容的主体部分
可以设置边框的样式
border-top-style:单独设置上边界的样式
border-style:dotted solid;设置上下样式为dotted,左右样式为solid

boder-color：设置边框颜色
boder-width：设置边框宽度
boder-radius:设置边框的圆润程度

下拉菜单的实现

//.findone {
    position: fixed;
    right: 15px;
    z-index:2;
}
.dropfind{
    color: black;
    font-size: 20px;
}
.find {
    right:5px;
    text-align: center;
    background-color: rgb(238, 228, 228);
    display: none;
    position: absolute;
    border-radius: 5%;
    min-width: 135px;
}
.findone:hover .find {
    display: block;
}//

背景
background-color:设置背景颜色
background-image:url(‘xx.jpg’);设置背景图片
background-repeat:repeat-y;沿y轴重复背景图片
background-repeat:repeat-x;沿x轴重复背景图片
background-repeat:no-repeat;不重复背景图片

对齐操作
align-content:space-around属性表示在所属容器内上下左右居中对齐
margin:0px auto;表示上下外边距为0，实现水平居中
text-align:center;控制文本的显示在行内中央

字体font
font-style:显示样式：正常，斜体
font-family:字体风格，宋体，楷体，行书等
font-size:14px;字体大小的控制

使用float，position，定位来实现所属容器的位置控制
用clear来清除浮动的影响