前言:这节课主要讲关于css的相关内容。

重点:1.css(Cascading Style Sheet)叠层样式表,做网页的外观,是用来控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

2.css的几种写法:

(1)行内样式:直接在html标签里写,在标签后面添加“style”。<div style="height:100px"></div>,其中,height为css的属性,100px为其属性值。

(2)内嵌样式:会涉及到选择器的概念,有三种选择器:标签选择器、class选择器、id选择器,下面分别介绍:

style样式写在title标签下面

<style type="text/css">

div{width:100px}

</style>

上面的例子中是对div进行样式设置,且所有的div都采用这一样式,被称为标签选择器。

还有一种选择器为class选择器,如

<style type="text/css">

.c1{color:#F00}

</style>

<div class="c1">你好</div>

class选择器的优先级高于标签选择器。

还有一种选择器叫id选择器,如

<style type = "text/css">

#d1{color:#F00}

</style>

<div id="d1">你好</div>

选择器的优先级高低排序:id选择器>class选择器>标签选择器。id是不能有多个或者重复的。

(3)链接样式:这是用的最多的一种样式,新建单独的css文件来单独表示样式,用的时候调用即可,创建一个css文件夹将不同的样式包含进来。不同的页面文件可以对应于不同的css文件,最好对应的起相同的名字,如a.html,a.css,公共样式可以命名为base.css,这样易于维护。体现了程序的低耦合性。

(4)导入样式:这种样式已经很少用了,是等整个html内容加载完了才开始加载样式表,效果不好。

<style>

@import url(1.css)

</style>

各种样式的选择采用就近原则,四种样式没有优先级关系。

3.css的注释方式:/*    */

4. css继承:子标签会继承父标签的所有样式,并可以自己修改而不影响父标签。

5.css文字效果:font-family(字体,需是电脑已安装的字体,微软雅黑效果不错);font-size(字体大小);color(字体颜色);font-weight(字体粗细);text-decoration:underline(下划线);text-decoration:overline(顶划线);text-decoration:line-through(删除线);text-transform:capitalize(单词首字母大写);text-transform:uppercase(单词全部大写);text-transform:lowercase(单词全部小写);letter-spacing(字母间距);text-align(文本对齐,left,right,center);line-height(垂直居中,让该属性值等于文本框高)。

6.取色实用工具:FSCapture。

7.第一次作业。

     8.图片效果:(1)图片边框border(border-style--dotted/dashed/solid、border-color/border-width)。

     9.设置网页背景:background-color(背景颜色)、background-image:url(xx.jpg,图片的相对路径)、background-repe(背景图片重复)、background-position(背景图片位置)、background-attachment:fixed(背景图片固定)。

后记:这一部分内容相对简单,但仍需练习。

ASP.NET动态网站制作(2)--css(1)的更多相关文章

  1. ASP.NET动态网站制作(3)--css(2)

    前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位.浮动.盒子模型(第二次课).css的具体应用(第三次课).css3(第四次课).今 ...

  2. ASP.NET动态网站制作(4)--css(3)

    前言:这节课主要运用前面所学的知识写三个例子,并且学习浏览器兼容性的解决方法. 内容: 例子1:一个关于列表的例子 html代码: <!DOCTYPE html PUBLIC "-// ...

  3. ASP.NET动态网站制作(1)--html

    前言:正式上课的第一课,讲的是前端部分的最基础内容:html. 前端:html,css,js 数据库:sql server 动态部分:.net,c#... IIS(Internet Informati ...

  4. ASP.NET动态网站制作(28)-- 三层框架(2)

    前言:三层框架的第二节课,继续上次课的内容. 内容: 1.三层框架的使用目的:可以将视图层和业务逻辑层及实体层分开,可以提高代码的扩展性,安全性,可以实现程序的低耦合性. 2.GetModel方法及G ...

  5. ASP.NET动态网站制作(26)-- Ajax

    前言:这节课讲解关于Ajax的相关内容. 内容: 1.当点击页面中的一个按钮提交数据或请求数据的时候,整个页面的信息都会提交(不管信息是否是提交或者请求的数据,页面中所有的数据都提交),这样耗用的时间 ...

  6. ASP.NET动态网站制作(20)-- C#(3)

    前言:C#的第三节课,继续上次课的内容,依旧围绕基础的只是讲解. 内容: 1.StringBuilder类:由于string类一旦创建,则不能更改.如果做字符串拼凑的话,将会非常耗费空间,如: str ...

  7. ASP.NET动态网站制作(18)-- jq作业讲解及知识补充

    前言:这节课主要讲解js及jq作业,并在作业讲解完后补充关于jQuery的一些知识点. 内容: 1.作业讲解:计算器那一块考虑的各种情况还不算完善,只实现了基本的功能,还需多多练习使用jQuery. ...

  8. ASP.NET动态网站制作(11)-- JQ(3)

    前言:这节课主要是讲CSS作业,然后继续讲jQuery. 内容: 1.css作业讲解. 2.jq设置元素样式:  (1)添加.删除css类别:$("div").addClass(& ...

  9. ASP.NET动态网站制作(0)

    前言:一直想系统地学习一下网站建设的相关内容,看过相关的书籍,也跟着视频学过,但总觉得效率不高,学过的东西印象不深刻,或许还是自己动手实践的少.无意中免费听了一堂讲ASP.NET网站建设的课,觉得性价 ...

随机推荐

  1. vmware tools安装过程

    每次通过vmware安装Ubuntu的时候,总是会多多少少出点问题.好容易披荆斩棘把镜像安好了,然而屏幕却只有小小一个,不能显示大屏,我就知道肯定是缺少了vmware tools.于是点击左上方菜单中 ...

  2. mysql error 1093 解决办法

    mysql> select * from t; +----+ | id | +----+ | 1 | | 2 | | 3 | | 4 | | 5 | | 6 | | 7 | | 8 | | 9 ...

  3. strcpy_s 函数的用法

    strcpy_s和strcpy()函数的功能几乎是一样的. strcpy函数,就象gets函数一样,它没有方法来保证有效的缓冲区尺寸,所以它只能假定缓冲足够大来容纳要拷贝的字符串.在程序运行时,这将导 ...

  4. 五、Ubuntu 进入vi相关问题

    1.进入vi环境:vim 路径 2.编辑vi:按i键即可 3.保存vi:按esc键,输入冒号,输入wq 回车即可 4.遇到readonly相关问题,可先解除readonly:按esc键,输入:set ...

  5. Android代码中设置字体大小,字体颜色,显示两种颜色.倒计时效果

    Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...

  6. Guice 4.1教程

    Guice是Google开发的一个开源轻量级的依赖注入框架,运行速度快,使用简单. 项目地址:https://github.com/google/guice/ 最新的版本是4.1,本文基于此版本. 0 ...

  7. (0)git安装

    windows安装 https://blog.csdn.net/sishen47k/article/details/80211002

  8. 正确地使用GIT FORK

    摘自github官方网站,稍后我将抽空翻译. Fork a repo https://help.github.com/articles/fork-a-repo/ Syncing a fork http ...

  9. 洛谷——P1617 爱与愁的一千个伤心的理由

    P1617 爱与愁的一千个伤心的理由 题目背景 (本道题目隐藏了两首歌名,找找看哪~~~) <爱与愁的故事第一弹·heartache>第二章. 经历了心痛后,爱与愁大神不行了. 题目描述 ...

  10. iterator取集合元素

    1,完整代码 //创建两个arraylist对象 Collection al = new ArrayList(); //al1添加元素 al.add("name1"); al.ad ...