精华内容
下载资源
问答
  • 局部套用CSS样式本章学习的主要内容 1、怎样在网页中添加和应用CSS样式 2、添加三种类型的样式 自定义样式 重定义的HTML标签 组合选择器样式 3、实验内容及其要求 第7章 使用文本样式设计 了解CSS样式定义 1、级联...

    局部套用CSS样式

    本章学习的主要内容 1、怎样在网页中添加和应用CSS样式 2、添加三种类型的样式 自定义样式 重定义的HTML标签 组合选择器样式 3、实验内容及其要求 第7章 使用文本样式设计 了解CSS样式定义 1、级联样式表(Cascading Style Sheets)样式是网页元素外观属性的集合。样式可以定义文本、表格、图像、表单等各种网页元素的外观。 2、好处:使用定义好的样式,可以在整个站点内的文件中使用,这样既保证了站点风格的一致性,又提高了工作效率。 3、CSS样式具有很高的工作效率,还因为它可以单独生成样式表文件,扩展名为*.CSS。 4、CSS样式是通过名称或HTML标签识别的。这样当改变样式属性并应用它时,只要查看文本就可以立即看到改变后的文本外观。 5、CSS样式表放置在文档的HEAD区域并将定义一系列样式。 6、手动添加的文本格式可优先于样式。如果要使样式控制段落格式,请删除所有其他的格式设置。 CSS在页面中的使用方式 1、按照定义的CSS的方式,CSS在页面中的使用方式主要有三种不同的类型: 局部套用CSS样式。将CSS语法定义在HTML标记旁边,这时定义的样式只能影响该HTML标记,对于其他的HTML标记则无影响。 在页面开头定义。这种方式是将CSS样式表写在标签之间,内置到HTML的头部,CSS样式将影响整个页面,这种方式使用于单个页面的情况。 链接外部样式表。将编辑好的CSS样式表存为CSS文件,其扩展名为.CSS,在设计网页的过程中可以采用链接的方式将编辑好的CSS样式表套用在页面中,而无须在HTML中出现CSS语法,采用这种方法有个很大的优点,就是可以一次让多个页面同时使用一个样式表,当更新或修改CSS样式表的源文件.CSS时,所有使用该CSS样式表的页面将自动更新。 Dreamweaver中所能定义的CSS样式 1、类(可应用于各种标签)(HTML标签样式)。即自定义CSS样式,可以将CSS自定义样式应用到任何范围或任何文本段中。该样式可重新定义某些特殊标签的格式。 2、标签(重新定义特定标签的外观)(自定义CSS样式)。标签样式将重新定义标签的格式,当重建或修改标签的CSS样式时,所有以该标签格式化的文本都将更新。 3、高级(ID、。上下文选择器等)(级联样式表选择器样式)。CSS选择其样式将重新定义一些标签的特定格式或包含某指定属性的所有标签的格式。该样式可重新定义某些特殊的标签组合。 在网页中添加样式 CSS样式包括 1、自定义样式:自定义样式需要选定应用对象,然后进行应用。使用CSS样式可以定义文本的字体变化、字间距和行间距变化以及边框效果等多重属性。 2、重新定义的HTML标签:重新定义的HTML标签不需要应用。网页中的该类标签都将自动生效。 3、选择器样式:选择器样式不需要应用,直接生效。 a:link 控制网页中链接文本的普通状态外观 a:active 控制当前活动的超级链接文本的外观 a:hover 控制的是鼠标悬停状态下超级链接文本的外观 a:visited 控制的是已经访问的超级链接文本的外观 CSS样式定义的选项说明 CSS样式定义包括8大分类: 类型 背景 区块 方框 边框 列表 定位 扩展 导出样式表文件 要使单个文档中的样式应用到其他文档,可以将其中的样式导出为样式表文件,这样,Dreamweaver可以通过样式表链接,使整个站点具有相同的样式设置。 具体操作步骤如下:文件---导出 链接外部样式表文件 外部样式表是一个仅包含样式规则的文本文件。编辑外部样式表将影响到所有链接引用它的文档,用户可以将样式表文件复制到自己的站点内,然后引入文档中。 步骤: 省略 实验内容及其要求 1、按提供的图像和文字制作完成的网页。实例中Exp8-9\sucai08、sucai09文件夹中找到相关的素材。 2、通过实验,了解如何在网页中添加样式,定义CSS样式有三种:类、标签和高级,分别如何设置这三类样式。掌握创建CSS样式的方法,以及如何在网页中附加外部CSS样式表。 作 业 思考练习题 P182 1----5

    展开全文
  •  

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • CSS中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时,往往需要一遍又一遍地写同一个ID:#content article h1 { color: #333 }#content article p { margin-bottom: 1.4em }#content aside { ...

    CSS中重复写选择器是非常恼人的。如果要写一大串指向页面中同一块的样式时,往往需要

    一遍又一遍地写同一个ID:

    #content article h1 { color: #333 }

    #content article p { margin-bottom: 1.4em }

    #content aside { background-color: #EEE }

    像这种情况,Sass可以让你只写一遍,且使样式可读性更高。在Sass中,你可以像俄罗斯套娃那样在规则块中嵌套规则块。sass在输出css时会帮你把这些嵌套规则处理好,避免你的重复书写。

    #content {

    article {

    h1 { color: #333 }

    p { margin-bottom: 1.4em }

    }

    aside { background-color: #EEE }

    }

    #content article h1 { color: #333 }

    #content article p { margin-bottom: 1.4em }

    #content aside { background-color: #EEE }

    上边的例子,会在输出css时把它转换成跟你之前看到的一样的效果。这个过程中,sass用了两步,每一步都是像打开俄罗斯套娃那样把里边的嵌套规则块一个个打开。首先,把#content(父级)这个id放到article选择器(子级)和aside选择器(子级)的前边:

    #content {

    article {

    h1 { color: #333 }

    p { margin-bottom: 1.4em }

    }

    #content aside { background-color: #EEE }

    }

    #content article h1 { color: #333 }

    #content article p { margin-bottom: 1.4em }

    #content aside { background-color: #EEE }

    然后,#content

    article里边还有嵌套的规则,sass重复一遍上边的步骤,把新的选择器添加到内嵌的选择器前边。

    一个给定的规则块,既可以像普通的CSS那样包含属性,又可以嵌套其他规则块。当你同时要为一个容器元素及其子元素编写特定样式时,这种能力就非常有用了。

    #content {

    background-color: #f5f5f5;

    aside { background-color: #eee }

    }

    容器元素的样式规则会被单独抽离出来,而嵌套元素的样式规则会像容器元素没有包含任何属性时那样被抽离出来。

    #content { background-color: #f5f5f5 }

    #content aside { background-color: #eee }

    大多数情况下这种简单的嵌套都没问题,但是有些场景下不行,比如你想要在嵌套的选择器 里边立刻应用一个类似于:hover的伪类。为了解决这种以及其他情况,sass提供了一个特殊结构。

    一般情况下,sass在解开一个嵌套规则时就会把父选择器(#content)通过一个空格连接到子选择器的前边(article和aside)形成(#content article和#content

    aside)。这种在CSS里边被称为后代选择器,因为它选择ID为content的元素内所有命中选择器article和aside的元素。但在有些情况下你却不会希望sass使用这种后代选择器的方式生成这种连接。

    最常见的一种情况是当你为链接之类的元素写:hover这种伪类时,你并不希望以后代选择器的方式连接。比如说,下面这种情况sass就无法正常工作:

    article a {

    color: blue;

    :hover { color: red }

    }

    这意味着color:

    red这条规则将会被应用到选择器article a

    :hover,article元素内链接的所有子元素在被hover时都会变成红色。这是不正确的!你想把这条规则应用到超链接自身,而后代选择器的方式无法帮你实现。

    解决之道为使用一个特殊的sass选择器,即父选择器。在使用嵌套规则时,父选择器能对于嵌套规则如何解开提供更好的控制。它就是一个简单的&符号,且可以放在任何一个选择器可出现的地方,比如h1放在哪,它就可以放在哪。

    article a {

    color: blue;

    &:hover { color: red }

    }

    当包含父选择器标识符的嵌套规则被打开时,它不会像后代选择器那样进行拼接,而是&被父选择器直接替换:

    article a { color: blue }

    article a:hover { color: red }

    在为父级选择器添加:hover等伪类时,这种方式非常有用。同时父选择器标识符还有另外一种用法,你可以在父选择器之前添加选择器。举例来说,当用户在使用IE浏览器时,你会通过JavaScript在

    标签上添加一个ie的类名,为这种情况编写特殊的样式如下:

    #content aside {

    color: red;

    body.ie & { color: green }

    }

    #content aside {color: red};

    body.ie #content aside { color: green }

    sass在选择器嵌套上是非常智能的,即使是带有父选择器的情况。当sass遇到群组选择器(由多个逗号分隔开的选择器形成)也能完美地处理这种嵌套。

    在CSS里边,选择器h1、h2和h3会同时命中h1元素、h2元素和h3元素。与此类似,.button

    button会命中button元素和类名为.button的元素。这种选择器称为群组选择器。群组选择器

    的规则会对命中群组中任何一个选择器的元素生效。

    .button, button {

    margin: 0;

    }

    当看到上边这段代码时,你可能还没意识到会有重复性的工作。但会很快发现:如果你需要在一个特定的容器元素内对这样一个群组选择器进行修饰,情况就不同了。css的写法会让你在群组选择器中的每一个选择器前都重复一遍容器元素的选择器。

    .container h1, .container h2, .container h3 { margin-bottom: .8em }

    非常幸运,sass的嵌套特性在这种场景下也非常有用。当sass解开一个群组选择器规则内嵌的规则时,它会把每一个内嵌选择器的规则都正确地解出来:

    .container {

    h1, h2, h3 {margin-bottom: .8em}

    }

    首先sass将.container和h1.container和h2.container和h3分别组合,然后将三

    者重新组合成一个群组选择器,生成你前边看到的普通css样式。对于内嵌在群组选择器内的嵌 套规则,处理方式也一样:

    nav, aside {

    a {color: blue}

    }

    首先sass将nav和aside和a分别组合,然后将二者重新组合成一个群组选择器:

    nav a, aside a {color: blue}

    处理这种群组选择器规则嵌套上的强大能力,正是sass在减少重复敲写方面的贡献之一。尤其在当嵌套级别达到两层甚至三层以上时,与普通的css编写方式相比,只写一遍群组选择器大大减少了工作量。

    有利必有弊,你需要特别注意群组选择器的规则嵌套生成的css。虽然sass让你的样式表看上去很小,但实际生成的css却可能非常大,这会降低网站的速度。

    上边这三个组合选择器必须和其他选择器配合使用,以指定浏览器仅选择某种特定上下文中的元素。

    article section { margin: 5px }

    article > section { border: 1px solid #ccc }

    你可以用子组合选择器>选择一个元素的直接子元素。上例中,第一个选择器会选择article下的所有命中section选择器的元素。第二个选择器只会选择article下紧跟着的子元素中命中section选择器的元素。

    在下例中,你可以用同层相邻组合选择器+选择header元素后紧跟的p元素:

    header + p { font-size: 1.1em }

    你也可以用同层全体组合选择器~,选择所有跟在article后的同层article元素,不管它们之间隔了多少其他元素:

    article ~ article { border-top: 1px dashed #ccc }

    这些组合选择器可以毫不费力地应用到sass的规则嵌套中。可以把它们放在外层选择器后边,或里层选择器前边:

    article {

    ~ article { border-top: 1px dashed #ccc }

    > section { background: #eee }

    dl > {

    dt { color: #333 }

    dd { color: #555 }

    }

    nav + & { margin-top: 0 }

    }

    sass会如你所愿地将这些嵌套规则一一解开组合在一起:

    article ~ article { border-top: 1px dashed #ccc }

    article > footer { background: #eee }

    article dl > dt { color: #333 }

    article dl > dd { color: #555 }

    nav + article { margin-top: 0 }

    在sass中,不仅仅css规则可以嵌套,对属性进行嵌套也可以减少很多重复性的工作。

    在sass中,除了CSS选择器,属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕,但是要反复写border-styleborder-widthborder-color以及border-*等也是非常烦人的。在sass中,你只需敲写一遍border:

    nav {

    border: {

    style: solid;

    width: 1px;

    color: #ccc;

    }

    }

    嵌套属性的规则是这样的:把属性名从中划线-的地方断开,在根属性后边添加一个冒号:,紧跟一个{

    }块,把子属性部分写在这个{

    }块中。就像css选择器嵌套一样,sass会把你的子属性一一解开,把根属性和子属性部分通过中划线-连接起来,最后生成的效果与你手动一遍遍写的css样式一样:

    nav {

    border-style: solid;

    border-width: 1px;

    border-color: #ccc;

    }

    对于属性的缩写形式,你甚至可以像下边这样来嵌套,指明例外规则:

    nav {

    border: 1px solid #ccc {

    left: 0px;

    right: 0px;

    }

    }

    这比下边这种同等样式的写法要好:

    nav {

    border: 1px solid #ccc;

    border-left: 0px;

    border-right: 0px;

    }

    属性和选择器嵌套是非常伟大的特性,因为它们不仅大大减少了你的编写量,而且通过视觉上的缩进使你编写的样式结构更加清晰,更易于阅读和开发。

    即便如此,随着你的样式表变得越来越大,这种写法也很难保持结构清晰。有时,处理这种大量样式的唯一方法就是把它们分拆到多个文件中。sass通过对css原有@import规则的改进直接支持了这一特性。

    展开全文
  • 找一个虽然不是很好看,但设置起来比较复杂的吧:彩色底纹-强调文字颜色6 Word中的效果如图示: 【样式分析】: Word中设置表格格式,主要是设置边框和底纹,可选定整个表格或者部分单元格右击→表格属性→边框和...
  • css:可以令层中层上下左右居中。(即:div之中的div的文本,上下左右居中显示)
  • 找一个虽然不是很好看,但设置起来比较复杂的吧:彩色底纹-强调文字颜色6 Word中的效果如图示: 【样式分析】: Word中设置表格格式,主要是设置边框和底纹,可选定整个表格或者部分单元格右击→表格属性→...

    找一个虽然不是很好看,但设置起来比较复杂的吧:彩色底纹-强调文字颜色6

    Word中的效果如图示:

    【样式分析】:

    Word中设置表格格式,主要是设置边框和底纹,可选定整个表格或者部分单元格右击→表格属性→边框和底纹,打开“边框和底纹”对话框进行设置或察看,简单分析如下:

    一、表头所有单元格

    1、上边框:无;

    2、左边框:无;

    3、右边框:无;

    4、下边框:颜色#4BACC6,3磅,单实线(网页中磅不好设置,用3px取代);

    二、内容所有行

    底纹颜色:#FEF4EC;

    三、内容所有奇数行

    底纹颜色:#FBCAA2;

    四、内容所有单元格

    左边框:白色,0.5,单实线(网页中磅不好设置,用1px取代);

    五、内容最后一行单元格

    下边框:颜色#B65608,0.5磅,单实线(网页中磅不好设置,用1px取代);

    六、内容最后一列所有单元格

    下边框:颜色#B65608,0.5磅,单实线(网页中磅不好设置,用1px取代);

    七、内容第一列所有单元格:

    底纹颜色: #B65608;

    左边框:颜色#B65608,0.5磅,单实线(网页中磅不好设置,用1px取代);

    文字颜色:白色;

    【HTML内容与结构】:

    <div style="width:600px;">
        <table class="table-11">
            <thead>
                <tr>
                    <th>Column0</th><th>Column1</th><th>Column2</th><th>Column4</th><th>Column5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td>
                </tr>
                <tr>
                    <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td>
                </tr>
                <tr>
                    <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td>
                </tr>
                <tr>
                    <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td>
                </tr>
                <tr>
                    <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td>
                </tr>
                 <tr>
                    <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td>
                </tr>
            </tbody>
        </table>
    </div> 
    

    【样式表】:

    .table-11
    {
        width: 100%;
        table-layout: auto; 
        *border-collapse:collapse;/* IE用 */
        border-spacing:0;
    }
    
    /*标题行*/
    .table-11 th
    {
    }
    
    /*内容所有行*/
    .table-11 tbody tr
    {
        background: #FEF4EC;
    }
    
    /*内容所有偶数行(奇数为odd、偶数为even)*/
    .table-11 tbody tr:nth-child(odd)
    {
        background: #FBCAA2;
    }
    
    /*鼠标悬停的行(不包括表头和表尾)*/
    .table-11 tbody tr:hover
    {
        background:#FFFF00;
    }
    
    /*所有单元格*/
    .table-11 th, td
    {
    }
    
    /*表头所有单元格*/
    .table-11 thead tr th
    {
        border-top: none;
        border-left: none;
        border-right: none;
        border-bottom: solid 3px #4BACC6;
    }
    
    
    /*表尾所有单元格*/
    .table-11 tfoot tr td
    {
    }
    
    /*内容所有单元格*/
    .table-11 tbody tr td
    {
        border-left:solid 1px White;
    }
    
    /*内容第一行所有单元格*/
    .table-11 tbody tr:first-child td
    {
        /*如果设置背景色,将失去鼠标悬停效果*/
    }
    
    /*内容最后一行所有单元格*/
    .table-11 tbody tr:last-child td
    {
        /*如果设置背景色,将失去鼠标悬停效果*/
        border-bottom:solid 1px #B65608;
    }
    
    /*表格第一列所有单元格*/
    .table-11 th:first-child, td:first-child
    {
    }
    
    /*表格最后一列所有单元格*/
    .table-11 th:last-child, td:last-child
    {
    }
    
    /*内容第一列所有单元格*/
    .table-11 tbody td:first-child
    {
        background: #B65608;
        border-left:solid 1px #B65608;
        color:White;
    }
    
    /*内容最后一列所有单元格*/
    .table-11 tbody td:last-child
    {
        border-right:solid 1px #B65608;
    }


    【效果】:

    本文主要是提供一些思路,细节分析和设置不见得非常恰当,有更好的思路和设置,还望不吝赐教……

     

    【参考网址】:

    http://www.csspop.com/view/657

    http://wenku.baidu.com/view/dc21ccf90242a8956bece408.html
    展开全文
  • 我直接用了SUI的popup然后遇到了一个问题我打开的popup会有一个蒙层 蒙层我想要但是他覆盖了我的popup连popup上面的按钮都按不了。这是蒙层.popup-overlay.modal-overlay-visible{visibility:visible;...}sm.css:269...
  • 上一篇介绍了CSS语法我们可以用以下四种方式,将CSS套用入HTML文件中:行內套用(Inline) 行内套用(Inline) 嵌入套用(Embed) 嵌入套用(Embed) 外部連接套用(External Link) 外部连接套用(External Link) 匯入套用...
  • 第五章 CSS样式与模板的使用;第五章 CSS样式与模板的使用;第五章 CSS样式与模板的使用;第五章 CSS样式与模板的使用;第五章 CSS样式与模板的使用;第五章 CSS样式与模板的使用;第五章 CSS样式与模板的使用;第五章 CSS...
  • 它可以预先定义一套颜色、字体大小等属性,HTML的标签就无需重复设置,直接套用CSS中设置好的样式即可。 使用方法 设置位置:网页头< head> < /head>部分 设置方式 (1)方式一:通过< style>...
  • 这个资源来自于原作者ximen,是从github上clone下来的。本人试过可以直接使用,而且里面有多种实例,希望可以帮助到大家!
  • 这个效果其实很容易,先来看一下原本的按钮长相,就只是个div套用CSS而已。 HTML: <div class="btn">click me</div> CSS: .btn{ position:relative; width:200px; height:30px; line-height:30px...
  • Django套用现成模板,导入css,js,images等文件

    万次阅读 多人点赞 2018-03-14 17:31:23
    "/static/css/bootstrap.css" rel= "stylesheet" type = "text/css" media= "all" /> "/static/css/style.css" rel= "stylesheet" type = "text/css" media= "all" /> 导入js < script src = "/...
  • 子元素选择器 #nav li 代表 nav 下的所有li标签 套用 css样式相邻同胞选择器 h1+p 可以让标题后面的第一个p元素 套用css样式属性选择器 abbr[title] :hover {cursor:help}层叠和特殊性元素的分类与标识有时,...
  • css

    2014-11-25 18:29:00
    CSS教程(一)认识CSS Dreamweaver4是现今最好的网站编辑工具之一,用它来给制作网页的CSS样式表会更简单、更方便。本教程教你如何利用Dreamweaver4在页面中加入CSS,你不用死记硬背的记代码标记,也不用去看很厚的...
  • Css

    2009-09-27 14:55:00
    CSS入门教程 -------------------------------------------------------------------------------- CSS是“Cascading Style Sheets”的简称,中文翻译为“串接样式表”,也有人翻译为“样式表”。CSS用以作为网页的...
  • CSS

    2007-09-20 00:00:00
    通过CSS可以使用更丰富、更灵活的样式,更简单设计出更美观的网页。CSS是用来扩展HTML的,而不是用来替代HTML的。也就是CSS离不开HTML,他只是一项辅助工具。CSS的特点:除了可扩展HTML的样式设定外,CSS还提供了多...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,580
精华内容 2,632
关键字:

怎么套用css