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

前言:这节课主要讲关于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.第一次作业。

后记

时间: 2024-10-14 20:44:32

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

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

前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位.浮动.盒子模型(第二次课).css的具体应用(第三次课).css3(第四次课).今天的内容是关于css中定位.浮动以及盒子模型. 内容:CSS最核心的内容,围绕div标签展开. 1.做静态网页首先要考虑页面的布局,可用<div></div>来将网页分为不同的模块,就相当于盖房子一样. 2.<div></div>是一个块元素,与之相对应的还有行

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

前言:这节课主要是讲CSS作业,然后继续讲jQuery. 内容: 1.css作业讲解. 2.jq设置元素样式:  (1)添加.删除css类别:$("div").addClass("myClass1 myClass2");$("div").removeClass("myClass1");  (2)类间动态切换: 1 $(function(){ 2 $("p").click(function(){ 3 $(th

ASP.NET动态网站制作(6)-- JS(1)

前言:JS的第一节课,在Visual Studio 2013中编写及运行.新建项目->Web->ASP.NET Web应用程序->Empty,打开后在项目下添加新建css文件夹和js文件夹等.一个解决方案就是一个.sln文件,一个解决方案里可以有多个项目文件. 内容: 1.JS(JavaScript)是一种脚本语言,结构简单,使用方便,其代码可以直接放入HTML文档中,可以直接在支持JavaScript的浏览器中运行.JavaScript使得网页的交互性更强,更生动灵活.当在浏览网页时做

ASP.NET动态网站制作(17)-- C#(1)

前言:用C#也有一年多了,基本上都是边用边学的,现在可以跟着老师系统的学习一下,感觉应该挺好的. 内容: 1.网站部署的相关内容:  (1)想要做一个网站,首先得去买一个域名,老师的域名是在美橙上买的.如果允许,可以把相应的.com,.cn,.net都注册掉,不然公司做大了就麻烦了.网站是放在服务器的硬盘上的,服务器的硬盘区域就叫做网站空间,所以买了域名之后就需要买网站空间.本地文件上传到网站空间上通过FTP上传.买的时候需要注意参数,最主要的看一下“支持语言”中的 .net 版本以及数据库.

ASP.NET动态网站制作(24)-- ADO.NET(3)

前言:ADO.NET的第三节课.今天主要讲SQL Helper. 内容: 1.DataReader和DataSet的区别: (1)DataReader是一行一行地读,且只能向前读:DataSet是一次性读取出来放到内存中,所以,DataReader读取速度更快,占用内存更低. (2)DataReader需要一直和数据库保持连接,DataSet读取完后即和数据库断开. (3)DataSet里面可以存储多个结果集(DataTable). (4)DataSet可以对数据进行缓存,而DataTable不

ASP.NET动态网站制作(13)-- JQ(5)

前言:jq的最后一节课,主要讲解应用, 内容: 1.会飞的li: HTML代码: 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>会

ASP.NET动态网站制作(12)-- JQ(4)

前言:这节课接着上次课的继续讲. 内容:接上--> 1.jq元素样式设置:  (4)某个元素中是否含有某个css类别,返回布尔型:$("li:last").hasClass("myClass");  (5)直接获取.编辑内容:html(text);text(content); 1 $("p").click(function(){ 2 var sHtmlStr = $(this).html(); 3 $(this).text(sHtmlStr

ASP.NET动态网站制作(30)-- WEBService

前言:继续讲正则表达式,然后介绍一下webservice. 内容: 1.匹配QQ号的正则表达式:^[1-9]\d{4,10}$:匹配手机号的正则表达式:^(0|86)?(13|14|15|18)[0-9]{9}$:匹配身份证号的正则表达式:^[1-9][0-9]{14}([0-9]{2}[0-9Xx]?)$. 2.js里面的正则:使用test(). 3.C#里面的正则: 1 string strQQ=txtQQ.Text.Trim(); 2 bool b = Regex.IsMatch(strQ

ASP.NET动态网站制作(7)-- JS(2)

前言:这节课是JS的第二节课,主要是JS中的控制语句. 内容: 1.条件语句:  (1)比较操作符:==,!=,>,>=,<,<=.字符串大小写转换:toUpperCase().toLowerCase().  (2)逻辑运算符:&&(与运算).||(或运算).!(非运算).  (3)if语句:if(条件){...} else if(条件){...}else{...},注意if与else的匹配问题. if(iNum1>iNum2) { iNum3=iNum1;