发表于: 2019-03-15 21:16:44
1 723
编辑日报内容...
今天完成的事情:
一,利用浮动float属性和clear属性,来清除元素侧面的浮动元素,同时也知道了clear属性会使margin属性失效。
二,理解了css语法:
1,基础部分:
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector {declaration1; declaration2; ... declarationN }
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。
selector {property: value}
举例:
下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。
在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。
h1 {color:red; font-size:14px;}
结构示意图:
声明用花括号包围。
2,高级部分:
(1)选择器的分组
对选择器进行分组,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
举例:
下面对所有的标题元素进行了分组。所有的标题元素都是绿色的。
h1,h2,h3,h4,h5,h6
{
color: green;
}
(2)关于继承属性
经过 CSS 继承,子元素将继承最高级元素(比如body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 最高元素的子元素都应该显示 一样的属性,子元素的子元素也一样。
如果不希望一个属性被所有的子元素继承,创建一个针对选择器的特殊规则,这样它就会摆脱父元素的规则,比如,你希望段落的字体是 Times:
body {
font-family: Verdana, sans-serif;
}
td, ul, ol, ul, li, dl, dt, dd {
font-family: Verdana, sans-serif;
}p
{
font-family: Times, "Times New Roman", serif;
}
三,理解了:
1,id 选择器
可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":
#para1{
text-align:center;
color:red;
}
注:id属性不能以数字开头
2,class选择器
用于描述一组元素的样式,注意!是一组,它有别于id选择器,class可以在多个元素中使用。
class选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示。
举下例,所有拥有 center 类的 HTML 元素均为居中:
.center
{
text-align:center;
}
举下例,所有的 p 元素使用 class="center" 让该元素的文本居中:
p.center
{
text-align:center;
}
四,利用width和height写出九个方形盒子,利用float属性盒子向左浮动排列。
明天要做的事:
1,使九宫格自适应屏幕宽度;
2,利用viewport对html进行优化,适配移动设备;
3,使用chorme开发者工具,模拟手机访问网页;
4,配置nginx,手机直接访问网页;
5,确认任务;
6,提交任务。
遇到的问题:暂无。
收获:理解了css语法;学会了用css选择器;师兄教我搜索css样式圆角,我领悟了搜索的方法。
评论