html学习笔记一——标签的属性

1.border-radius：向div元素添加圆角边框

div
{
border:2px solid;
border-radius:25px;
}

2.margin：设置所有外边距属性。该属性可以有 1 到 4 个值,，设置顺序为上、右、下、左

p
  {
  margin:2cm 4cm 3cm 4cm;
  }

3.opacity 属性设置元素的不透明级别

div
{
opacity:0.5;
}

4.:focus 选择器用于选取获得焦点的元素，设置获得焦点时的样式

input:focus
{ 
background-color:yellow;
}

5.设置超链接的样式

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

6.box-shadow 向框添加一个或多个阴影

div
{
box-shadow: 10px 10px 5px #888888;
}

7.float ：定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

8.:hover 选择器用于选择鼠标指针浮动在上面的元素

a:hover
{ 
background-color:yellow;
}

9.autofocus ：规定当页面加载时 input 元素应该自动获得焦点

<form action="demo_form.asp">
  First name:<input type="text" name="fname" autofocus="autofocus" /><br />
  Last name: <input type="text" name="lname" /><br />
  <input type="submit" />
</form>

10.required ：规定必需在提交之前填写输入字段

<form action="demo_form.asp" method="get">
  Name: <input type="text" name="usr_name" required="required" />
  <input type="submit" />
</form>

11.background-size：规定背景图像的尺寸

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

12.background-repeat：设置是否及如何重复背景图像

body
  {
  background-image: url(stars.gif);
  background-repeat: repeat-y;
  }

13.* {}:*相当于选择器，代表html所有的元素，包括html标签、body标签等； {}大括号里面写入需要给定的属性和属性值即可

* { 
    margin:0;
    padding:0;
}

14.htmi{}:一个div块级元素没有主动为其设置宽度和高度，浏览器会为其分配可使用的最大宽度(比如全屏宽度)，但是不负责分配高度，块级元素的高度是由子元素堆砌撑起来的。浏览器负责分配块级元素宽度，那么浏览器也一定可以分配高度(只是没有做)，那么浏览器本身是有宽度和高度的，设置html的height:100%，就可以获取浏览器的定高了，后面的body和div也就有了依赖。

html{ 
    height:100%;
}

15.overflow ：定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

16.for 属性规定 label 与哪个表单元素绑定。标记通常以下面两种方式中的一种来和表单控件相联系：将表单控件作为标记标签的内容，这样的就是隐式形式，或者为 <label> 标签下的 for 属性命名一个目标表单 id，这样就是显式形式。

<!--显式的联系：-->
<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

<!--隐式的联系：-->
<label>Date of Birth: <input type="text" name="DofB" /></label>

17.min-height 属性设置元素的最小高度。该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。

p
  {
  min-height:100px;
  }

18.box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

html学习笔记一——标签的属性

猜你喜欢