CSS课件

CSS入门软件工程系周群2020年5月22日星期五2CSS样式控制基本内容1基本概念2CSS选择器3字体和文本控制4控制背景控制5CSS的盒子模型6定位与布局7边框控制你知道吗？CSS是CascadingStyleSheets（层叠样式表）的简称，简称样式表，它是一种设计网页样式的工具。*在标准网页设计中CSS负责网页内容(XHTML)的表现.*CSS文件也可以说是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.*可以通过简单的更改CSS文件,改变网页的整体表现形式,减少我们的工作量。CSS的特点（1）一组样式可以被调用在多个对象上只要定义一组样式后，就可以随心所欲地被调用在任一段。（2）语法易学易懂（3）简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。链入外部样式表文件(LinkingtoaStyleSheet)可以先建立外部样式表文件（.css），然后使用HTML的link对象。注意：将样式分类后放在单独的CSS文件中，然后在网页中添加所引用的CSS文件。当需要修改元素的样式时，只需要修改.css文件中的样式即可。一旦修改了.css文件中的某个样式，则凡是引用了该.css文件的网页，都会自动应用新的样式。CSS文件中每个样式定义的一般格式为：选择符{属性1:值1;属性2:值2;……}htmlheadtitle导入样式/titlelinkrel=stylesheettype=text/csshref=s.css//headbodyh1CSS学习/h1p此段落使用导入样式修饰/p/body/html2020年5月22日星期五5h1{text-align:center;color:#0000ff}p{font-weight:bolder;text-decoration:underline;font-size:20px;}s.css定义内部样式块对象(EmbeddingaStyleBlock)可以在HTML文档的HTML和BODY标记之间插入一个STYLE.../STYLE块对象。示例如下：htmlheadtitle内嵌样式测试/titlestyletype=text/cssh1{font-size:30pt;color:Red;}h2{font-size:20pt;color:Blue;}/style/headbodydivh1第1章/h1h21.1/h2h21.2/h2h1第2章/h1h22.1/h2h22.2/h2/div/body/html请注意，这里将style对象的type属性设置为text/css，是允许不支持这类型的浏览器忽略样式表单。内嵌样式表(InlineStyles)内嵌样式表即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下：pstyle=“height:300;width:400”这是个实例/p注意事项：如果某个元素既使用了外部样式表，又使用了内部样式表，同时也定义了内嵌样式，而这些样式的定义又发生了冲突，元素最终呈现的效果会是什么呢？实际上浏览器会按照文档解析的顺序，依次应用样式，优先级依次为：内嵌样式、内部样式、外部样式。Css语法CSS的定义是由三个部分构成:选择符(selector)，属性(properties)和属性的取值(value)。语法：selector{property:value}(选择符{属性:值})说明：选择符可以有多种形式。如果属性的值是字符串，必须在值上加引号如果需要对一个选择符指定多个属性时，使用分号将所有的属性和值分开Css选择符1、标签选择符标签选择符是定义样式的HTML标记，例如BODY、P、TABLE……例：body{color:black}例如：p{font-size:14px;}这行代码表示所有p元素的字体大小全部为14像素。htmlheadtitle标签选择器/titlestylep{color:blue;font-size:20px;}/style/headbodyp此处使用标签选择器控制段落样式/p/body/html102、选择符组可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义。例：h1,h2,h3,h4,h5,h6{color:green}(这个组里包括所有的标题元素，每个标题元素的文字都为绿色)htmlheadtitle组合选择器/titlestylep{color:red}p.firstPar{color:blue}.firstPar{color:green}/style/headbodyp这是普通段落/ppclass=firstPar此处使用组合选择器/ph1class=firstPar我是一个标题/h1/body/html2020年5月22日星期五123、类选择符用类选择符能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。例：p.right{text-align:right}.center{text-align:center}htmlheadtitle类选择器/titlestyle.aa{color:blue;font-size:20px;}.bb{color:red;font-size:22px;}/style/headbodyh3class=bb学习类选择器/h3pclass=aa此处使用类选择器aa控制段落样式/ppclass=bb此处使用类选择器bb控制段落样式/p/body/html2020年5月22日星期五144、ID选择符在HTML页面中ID参数指定了某个单一元素，ID选择符是用来对这个单一元素定义单独的样式。定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法。例：#intro{font-size:110%;font-weight:bold;｝注意：利用CSS定义样式时，如果在一个元素的样式定义中，既有HTML元素，又有自定义类和自定义ID，则自定义ID的优先级最高，其次是自定义类，HTML元素的优先级最低。p#intro{font-size:110%;font-weight:bold;｝htmlheadtitleID选择器/titlestyle#fontstyle{color:blue;font-weight:bold;}#textstyle{color:red;font-size:22px;}/style/headbodyh3学习ID选择器/h3pid=textstyle此处使用ID选择器aa控制段落样式/ppid=fontstyle此处使用ID选择器bb控制段落样式/p/body/html2020年5月22日星期五165、包含选择符可以单独对某种元素包含关系定义的样式表，元素1里包含元素2，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。例：tablea{font-size:12px}6.全局选择器（*）全局选择器是指选择HTML文档内的所有元素。例如：*{color:Red;}这行代码的含义是设置HTML文档中的所有元素颜色为红色。htmlheadtitle全局选择器/titlestyle*{color:red;font-size:30px}/style/headbodyp使用全局选择器修饰/pp第一段/ph1第一段标题/h1/body/html样式表的层叠性层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起，除非另外更改。有些情况下内部选择符不继承周围选择符的值，但理论上这些都是特殊的。例：divp我会是什么颜色？/p/div如果定义css：div{color:red;font-size:9pt}/*段落的文字为红色9号字.另外，当样式表继承遇到冲突时，总是以最后定义的样式为准。接上例：如果定义css：div{color:red;font-size:9pt}p{color:blue}/*段落的文字为蓝色9号字*/样式表的优先级不同的选择符定义相同的元素时，要考虑到不同的选择符之间的优先级。ID选择符，类选择符和HTML标记选择符，因为ID选择符是最后加上元素上的，所以优先级最高，其次是类选择符。如果想超越这三者之间的关系，可以用!important提升样式表的优先权，例如:p{color:#FF0000!important}.blue{color:#0000FF}#id1{color:#FFFF00}CSS的单位表示形式1.长度单位CSS的长度单位分为绝对长度单位和相对长度单位两种。绝对长度单位有px（像素）、cm（厘米）、mm（毫米）、in（英寸）、pt（点，1pt=1/72英寸）、pc（1pc=12点）。一般来说，使用“px”以及“%”作为长度单位的网页比较多。相对长度单位常用有两种，一种是%（百分比），例如50%；另一种是em，例如0.1em。em指相对于父元素的字体大小比例，一般用来表示一行文字的高度。控制字间距和行间距时，多数情况下都是使用“em”作为长度单位。1em=100%=14px=10.5pt1.长度单位2020年5月22日星期五222.颜色单位CSS3.0中，有HEX、RGB、RGBA、HSL、HSLA以及transparent等颜色表示形式。HEX：使用两位十六进制数表示RGB颜色，每个颜色通道的取值范围均为00-FF；例如“#3B04C5”RGB：使用十进制数表示颜色，格式为rgb(R,G,B)，其中R、G、B三个值都是0～255的整数或者范围为0%-100%的百分数。.foreground{color:rgb(255,0,0);}RGBA：格式为rgba(R，G，B，A)。它和rgb(R,G,B)的区别是多了一个alpha通道（即透明度）；background-color:rgba(255,0,0,0.5);2.颜色单位HSL：使用CSS3.0支持的色调（Hue）、饱和度（Saturation）和亮度（Lightness）来表示颜色，格式为HSL(H,S,L)。background-color:hsl(0,100%,50%);HSLA：前三个值的含义与HSL相同，最后一个A表示透明度（Alpha），取值为0-1之间。background-color:hsla(0,100%,50%,0.5);transparent：transparent是全透明黑色（black）的速记法，即一个类似rgba(0,0,0,0)这样的值。在CSS3.0中，transparent被延伸到任何一个有color值的属性上。例如：.test{color:transparent;border:1pxsolidtransparent;background:transparent;}3、角度、时间和频率单位CSS3.0新增了表示各种角