本人一直在从事.net的开发,界面都是采用的WPF,近期花了一个多月进行HTML前端的学习,在这里呢进行学习总结和归纳。

  本系列将主要分为4个模块:

    控件

    样式

    布局

    JavaScript

  根据多年WPF的开发经验,界面就是控件及样式与布局的组合,再加上代码来控制交互逻辑,本期先对HTML常用的样式属性进行归纳。

  选择器

  选择器用于对HTML控件及css的样式进行匹配,常用的选择器有如下几种:

  id选择器

  

  以下的样式规则应用于元素属性 id="para1":

 #para1
{
text-align:center; color:red;
}

  class选择器  

  在以下的例子中,所有拥有类名为center的 HTML 元素均为居中。

 .center
{
text-align:center;
}

  所有的 p 元素使用 class="center" 让该元素的文本居中:

 p.center
{
text-align:center;
}

  分组选择器

 h1,h2,p
{
color:green;
}

  以上样式与下面的效果一致

 h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

  嵌套选择器

  适用于选择器内部的选择器的样式

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked"p 元素指定一个样式。

  

  后代选择器

  以下实例选取所有插入到 <div> 元素中的 <p> 元素:

 div p
{
background-color:yellow;
}

  子元素选择器

  以下实例选择了<div>元素中所有直接子元素 <p> :

 div>p
{
background-color:yellow;
}

  子元素选择器与后代选择器的区别在于,子元素选择器仅对直接子元素有效,如果进行了一层嵌套,样式就不再有效。

  属性选择器

  下面的例子是把包含标题(title)的所有元素变为蓝色:

 [title]
{
color:blue;
}

  属性和值选择器

  下面的实例改变了标题title='runoob'元素的边框样式:

 [title=runoob]
{
border:5px solid green;
}

  常用的选择器就介绍完了。

  属性

  注:布局相关的属性将在下一节进行讲解,这里只进行样式属性的讲解

  Background 背景

  该CSS 属性定义背景效果:

  • background-color  用于设置背景色
  • background-image   用于设置背景图片
  • background-repeat   用户设置背景重复填充,分为不重复、x方向重复、y方向重复、xy方向均重复
  • background-attachment  用于设置背景的鼠标滚动样式,分为随滚动移动,不随滚动移动,从父元素继承
  • background-position 用于设置背景的位置

  Text 文本

  文本不是属性,是界面元素,该元素主要进行以下几种属性的设置:

  Color : 字体颜色

  Text-align : 文本对齐方式

  text-indent :首行文本缩进

  font-family : 字体设置

  font-size:字体大小

  text-decoration 文字装饰,最常用的场景就是给链接a去掉下划线

  border 边框

  border-style 边框样式常用值为无边框及实线边框

  border-width 边框宽度

  border-color 边框颜色

  另外,如果需要,我们也可通过来进行某一条边的属性设置

  Border-(left/right/top/bottom)-(color/style/width)

例如:

border-right-color

设置元素的右边框的颜色。

  Margin / padding 外边距 / 内边距

   除了可以如上图,对每个方向的外边距/内边距进行设置外,还能够直接通过margin/padding进行多个方向的设置

  margin属性可以有一到四个值。

  • margin:25px 50px 75px 100px;

    • 上边距为25px
    • 右边距为50px
    • 下边距为75px
    • 左边距为100px
  • margin:25px 50px 75px;

    • 上边距为25px
    • 左右边距为50px
    • 下边距为75px
  • margin:25px 50px;

    • 上下边距为25px
    • 左右边距为50px
  • margin:25px;

    • 所有的4个边距都是25px

  Padding也可通过一样的方式进行设置。

  Size 尺寸

尺寸的属性主要是宽度/高度/最大宽度/最大高度/最小宽度/最小高度,分别对应如下属性

属性

描述

height

设置元素的高度。

line-height

设置行高。

max-height

设置元素的最大高度。

max-width

设置元素的最大宽度。

min-height

设置元素的最小高度。

min-width

设置元素的最小宽度。

width

设置元素的宽度。

  Display/Visibility 可见性

  这两个属性都可控制控件的可见性,主要值如下:

  Display:none 控件不可见,不占用布局

  Visibility:hidden 控件不可见,占用布局

  Display:inline 在一行内显示相关控件

  Display:block 控件作为块元素显示

  Float: 浮动

  当窗体尺寸变化时,float属性将帮助控件进行移动来完成重新布局。

  Demo实战:网站导航栏

  在开始之前我们需要知道一些有关链接的状态

  a:link {color:#FF0000;} /* 未访问的链接 */

  a:visited {color:#00FF00;} /* 已访问的链接 */

  a:hover {color:#FF00FF;} /* 鼠标划过链接 */

  a:active {color:#0000FF;} /* 已选中的链接 */

  

  首先我们需要在html中添加一个列表,如下

 <ul>
<li><a href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

  很显然不够美观,我们需要对它的样式进行调整

ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
} li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

  即可得到如下视图

  这里我们得给列表添加鼠标悬停的效果,这里用到的是a:hover.

li a:hover{
background-color: #555;
color: white;
}

对于选中项,我们可以通过设置其class = “active”来实现。

  li a.active {
background-color: #4CAF50;
color: white;
}
 <ul>
<li><a class = “active” href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>

  具体实现怎么进行选中项的切换,将在下下节javascript后进行讲解。

HTML前端入门归纳——样式的更多相关文章

  1. HTML前端入门归纳——控件

    本人一直在从事.net的开发,界面都是采用的WPF,近期花了一个多月进行HTML前端的学习,在这里呢进行学习总结和归纳. 本系列将主要分为4个模块: 控件 样式 布局 JavaScript 根据多年W ...

  2. HTML前端入门归纳——布局

    本人一直在从事.net的开发,界面都是采用的WPF,近期花了一个多月进行HTML前端的学习,在这里呢进行学习总结和归纳. 本系列将主要分为4个模块: 控件 样式 布局 JavaScript 根据多年W ...

  3. HTML入门归纳--JavaScript

    本人一直在从事.net的开发,界面都是采用的WPF,近期花了一个多月进行HTML前端的学习,在这里呢进行学习总结和归纳. 本系列将主要分为4个模块: 控件 样式 布局 JavaScript 根据多年W ...

  4. 结合个人经历总结的前端入门方法 (转自https://github.com/qiu-deqing/FE-learning)

    结合个人经历总结的前端入门方法 (https://github.com/qiu-deqing/FE-learning),里面有很详细的介绍. 之前一直想学习前端的,都不知道怎么下手都一年了啥也没学到, ...

  5. web前端入门:一小时学会写页面

    一小时学会写页面 作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法.既然题目已经定了一个小时那么废话就不多说了,计时开始 1 ...

  6. 前端入门3-CSS基础

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...

  7. Web前端入门教程之浏览器兼容问题及解决方法

    JavaScript 被称为JS,是作为浏览器的内置脚本语言,为我们提供操控浏览器的能力,可以让网页呈现出各种特殊效果,为用户提供友好的互动体验.JS是Web前端入门教程中的重点和难点,而浏览器兼容性 ...

  8. 前端入门系列之HTML

    前端入门系列之HTML 超文本标记语言 (英语:Hypertext Markup Language,简称:HTML ) 是一种用来结构化 Web 网页及其内容的标记语言.网页内容可以是:一组段落.一个 ...

  9. 新浪、腾讯、淘宝为何如此重视Web前端?前端入门容易吗?

    为什么新浪.搜狐.网易.腾讯.淘宝等在内的各种规模的IT企业,都对web前端越来越重视了呢?小编为您揭晓答案! web前端的由来 以前会Photoshop和Dreamweaver就可以制作网页.随着时 ...

随机推荐

  1. webpack打包后不能调用,改用uglifyjs打包压缩

    背景: 项目基于原生js,没用到任何脚手架和框架,但也需要打包压缩. 项目的js中声明了一些全局变量 供其他js调用. 这时候如果用webpack打包,基于webpack特性,会嵌套一层大函数,会将j ...

  2. ECMAScript基本对象——Boolean对象

    1.创建 var myBoolean=new Boolean(); 2.方法 toString()把布尔值转换为字符串,并返回结果 valueOf()返回 Boolean 对象的原始值. 3.属性 1 ...

  3. 【巨杉数据库SequoiaDB】巨杉数据库荣获《金融电子化》“金融科技创新奖”

    巨杉助力金融科技创新 2019年12月19日,由<金融电子化>杂志社主办.北京金融科技产业联盟协办的“2019中国金融科技年会暨第十届金融科技及服务优秀创新奖颁奖典礼”在京成功召开.来自金 ...

  4. 【巨杉数据库SequoiaDB】企业级和开源领域“两开花”,巨杉引领国产数据库创新

    2019年12月15日,OSC 源创会·年终盛典在深圳圆满举行.巨杉数据库作为业界领先的金融级分布式数据库厂商, 获得 “2019年开源数据库先锋企业” 及 “2019 GVP-Gitee最有价值开源 ...

  5. 《NVM-Express-1_4-2019.06.10-Ratified》学习笔记(5.23)-- Format NVM command

    5.23 Format NVM command - NVM Command Set Specific Format NVM命令用于低级格式化NVM媒介.这个命令被host主机使用,来变更LBA数据大小 ...

  6. vue.js 的cdn 链接的引用地址

    引用地址有两种一种完整版,一种压缩版效果是一样的 https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js https://cdn.bootcss.com ...

  7. cursor 把鼠标指针的形状弄成一只伸出食指的手

    <span style="cursor:auto">auto</span><br> <span style="cursor:cr ...

  8. 复选框与bitmap算法实践

    bitmap(位图)算法 bitmap算法是利用数据二进制的每一位的值来表示数据的算法,可用来压缩保存数据集. 如何保存 如 5(int)的二进制表示为 101b,第一位和第三位的值是1就可以表示数据 ...

  9. python接口自动化之发送get(三)

    1.安装requests requests是python的第三方库,需要进行安装.安装之前最好先关闭fiddler cmd(win+R快捷键)输入:pip install requests 其他命令: ...

  10. AI赋能抗疫!顶象入选“中关村第二批抗疫新技术新产品新服务清单”

    新型冠状病毒疫情仍未到达拐点,要打赢这场疫情攻坚战,不仅需要全国人民共同努力,还要使用科技的手段,用科学来守护大家的安全.对病毒的识别需要运用生物学技术进行基因测序,病患需要依靠医学能力进行救治.与此 ...