styles_stylesheet - CSDN
精华内容
参与话题
  • Styles

    2017-02-16 11:04:34
    elevationset android shadowshadowColor: '#000', shadowOffset: { width: 0, height: 2}, shadowOpacity: 0.2, elevation: 2,tintColorbackgroundColor对于视图上的带有线条的内容是无法改变的;...

    elevation

    set android shadow

    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2},
    shadowOpacity: 0.2,
    elevation: 2,

    tintColor

    backgroundColor对于视图上的带有线条的内容是无法改变的;比如字体颜色,
    那么,tintColor 是描述线条轮廓的一种颜色,该颜色默认具有传递性,默认状态下最底部的视图的tintcolor会一直往上面的视图传递 ,如果子视图改变了tintcolor那么将会和父视图的tintColor不一样;传递链从此处断开

    这里写图片描述

    可以从上图中看出,tintColor从父视图一直传递了过来;
    由此我们可以做一个,比较偷懒的做法,把所有的默认的线条颜色都改为一样的,用如何做呢?
    改变window的tintColor即可,因为window是最底层的view!

    展开全文
  • styles

    2012-06-05 06:48:13
    1 coolmenu.css @import url(global.css);.../* CoolMenus 4 - default styles - do not edit */ .clCMEvent{position:absolute; width:99%; height:99%;   clip:rect(0,100%,100%,0); left:0; top:

    1 coolmenu.css

    @import url(global.css);


    /* CoolMenus 4 - default styles - do not edit */
    .clCMEvent{position:absolute; width:99%; height:99%; 
               clip:rect(0,100%,100%,0); left:0; top:0;}
    .clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
    /* CoolMenus 4 - default styles - end */
    .clBar {
        position: absolute; 
        width: 100%; 
        height: 40px; 
        background-color: #eee;
        color: black;
        margin-right: auto;
        margin-left: auto;
        visibility: hidden;
    }


    .cmMenu, .cmItem {
        position: absolute; 
        font-family: Arial, Helvetica, San-serif;
        background-color: transparent; 
        border: 1px solid #eee;
        color: #0000ff; 
        padding: 2px; 
    }


    .cmMenu, .cmMenuOver {
        text-align: center;
        font-size: 12px;
    }


    .cmMenuOver, .cmItemOver {  
        font-family: Arial, Helvetica, San-serif;
        position: absolute; 
        border: 1px solid silver;
        background: transparent;
        color: #0000ff;
        padding: 3px; 
        cursor: pointer; 
        cursor: hand; /* IE 5.5 non-compliant workaround */ 
    }


    .cmMenuBorder, .cmItemBorder {
        position: absolute; 
        visibility: hidden; 
    }


    .cmItem, .cmItemOver {
        background-color: #eee; 
        color: #000000; 
        text-align: left;
    }


    .cmItemOver {
        background-color: #c0c0c0; 
        color: red; 
    }
     
    .cmItem, .cmItemOver {
        font-size: 12px;
    }


    .cmItemBorder {
        background: #000;
    }


    .menuArrows {
        vertical-align: middle;
        margin-left: 0px;
    }

    2 global.css

    body {
      background: #fff;
      font: 12px/1.5em Georgia,Serif;
    }


    ul.glassList {
        list-style: url(../images/aquadot.jpg) disc outside;
        margin-right: 50px;
    }


    div#content {
        margin:0;
        padding: 1em;
        clear:both;
    width: 400px;
    }


    div#header {
        margin-bottom: 0px;
    }


    div#source {
        padding: 3px;
        text-align: right;
        font-weight: bold;
        padding-right: 10px;
        position: absolute;
        width: 120px;
        top: 0px;
        right: 0px;
        z-index: 1000;
        border-left: 1px solid silver;
        border-bottom: 1px solid silver;
        background: #eee;
    }


    div#pageSource {
    position: absolute;
    top: 0px;
    right: 133px;
    width: 200px;
    border: 1px solid silver;
    border-top: 0;
    background: #ffd;
    padding: 3px;
    z-index: 1000;
    }


    img.download {
    vertical-align: middle;
    border: 0;
    }


    body#index div#source {
        background: none;
        border: none;
    }


    div#source a {
        color: green;
    }


    div#footer {
        border-top: 1px solid #eee;
        padding: 3px;
        text-align: center;
        font-size: 11px;
    }


    div#footer a {
        font-family: tahoma, arial, sans-serif;
        text-decoration: none;
        color: #999;
    }


    pre {
        background: #ffffdd;
        border: 1px solid #999999;
        color: #000000;
        padding: 5px 5px 5px 7px;
        font-size: 12px;
        line-height: normal;
    }


    div.dynamicMenu {
        position: relative;
        left: 0;
    }


    div.tree {
        padding: 10px;
    }

    3 menuDropdown.css

    /*
    *  Navigation Menu Styles
    *  Original work:  Dave Lindquist (http://www.gazingus.org)
    *
    *  Modified to support sub menus 2/27/2004 by Ryan Tyer
    *
    */


    @import url(global.css);


    body {
      margin: 0px;
      padding: 0px
    }


    #topMenu {
      background-color: #EEE;
      border: 1px solid #CCC;
      color: #000;
      margin: 0px;
      padding: 0px 0px 2px 20px;
      margin-bottom: 20px;
    }


    .menuList {
      margin: 0px;
      padding: 0px;
    }


    .menuList ul {
      margin: 0px;
      padding: 0px;
    }


    .menuList li {
      display: inline;
      list-style: none;
    }
    /* actuators are what trigger the menu display, in conjunction with js */
    a.actuator {
      background-color: transparent;
      color: #000;
      font-size: 12px;
      margin: 0px;
      padding: 3px 6px;
      text-decoration: none;
    }


    a.actuator:hover {
      background-color: #009;
      color: #EEE;
    }
    /* for submenu */
    a.subactuator {
      font-weight: bold;
      background-image: url(../images/arrow.png);
      background-repeat: no-repeat;
      background-position: 100% 0px;
    }
    /* The width on the menu's is used in the submenu class.  If you change it here, it must be changed in further down */
    .menu {
      color: #fff;
      background-color: #eee;
      border: 1px solid #999;
      position: absolute;
      visibility: hidden;
      z-index:5;
      width: 140px;
    }


    .menu li a {
      background-color: transparent;
      color: #000;
      display: block;
      font-size: 12px;
      line-height: 1.75em;
      margin: 0px;
      padding: 0px 10px;
      text-decoration: underline;
    }


    .menu li a:hover {
      background-color: #009;
      color: #fff;
    }


    /*
    This is what modifies the display position of the submenu.
    */
    .submenu {
      color: #fff;
      background-color: #eee;
      border: 1px solid #999;
      position: absolute;
      visibility: hidden;
      left: 140px;
      width: 110px;
      text-decoration: none;
    }


    span.key {
      text-decoration: underline;
    }




    #productsMenu { width: 165px; }
    #plansMenu { width: 160px; }
    #coverageMenu { width: 160px; }
    #companyInfoMenu { width: 165px; }
    #helpMenu { width: 150px; }



    4 menuExpandable.css

    @import url(global.css);


    .menuList {
      margin: 0px;
      padding: 10px 0px 10px 15px;
    }


    li.menubar {
      background: url(../images/plus.gif) no-repeat 0em 0.3em;
      font-size: 12px;
      line-height: 1.5em;
      list-style: none outside;
    }


    .menu, .submenu {
      display: none;
      margin-left: 15px;
      padding: 0px;
    }


    .menu li, .submenu li  {
      background: url(../images/square.gif) no-repeat 0em 0.3em;
      list-style: none outside;
    }


    li.menubar a.standalone {
      background: url(../images/square.gif) no-repeat 0em 0.2em !important;
    }


    a.actuator, a.standalone {
      background-color: transparent;
      color: #000;
      font-size: 12px;
      padding-left: 15px;
      text-decoration: none;
    }


    .menu li a, .submenu li a {
      background-color: transparent;
      color: #000;
      font-size: 12px;
      padding-left: 15px;
      text-decoration: none;
    }


    a.actuator:hover, .menu li a:hover, submenu li a:hover, li a.standalone:hover {
      text-decoration: underline;
    }


    /* styles to allow for base links */
    li a.base, li a.base:visited {
      background-color: transparent;
      color: #000;
      font-size: 12px;
      padding-left: 0px;
      text-decoration: none;
    }


    li a.base:hover {
      color: #CC0000;
      text-decoration: none;
    }


    span.key {
      text-decoration: underline;
    }


    a.highlight {
        color: red !important;
        font-weight: bold;
    }

    5 nicetabs.css

    body {
      background:#fff;
      margin:0;
      padding:0;
      color:#000;
      font:x-small/1.5em Georgia,Serif;
      voice-family: "\"}\""; voice-family:inherit;
      font-size:small;



    body#nicetabs #content { padding-top: 20px !important}


    html>body {font-size:small;}


    #header {
      float:left;
      width:100%;
      background:#DAE0D2 url(../images/bg.gif) repeat-x bottom;
      font-size:93%;
      line-height:normal;
      margin-bottom: 5px;
      }
    #header ul {
      margin:0;
      padding:10px 10px 0;
      list-style:none;
      }
    #header li {
      float:left;
      background:url(../images/left_both.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 9px;
      border-bottom:1px solid #765;
      white-space: nowrap;
    }
      
    #header a {
      float:left;
      display:block;
      width:.1em;
      background:url(../images/right_both.gif) no-repeat right top;
      padding:5px 15px 4px 6px;
      text-decoration:none;
      font-weight:bold;
      color:#765;
    }


    #header > ul a {width:auto;}
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #header a {float:none;}
    /* End IE5-Mac hack */
    #header a:hover {
      color:#333;
      }
    #header li.selected {
      background-position:0 -150px;
      border-width:0;
      }
    #header li.selected a {
      background-position:100% -150px;
      padding-bottom:5px;
      color:#333;
      }
    #header li:hover, #header li:hover a {
      background-position:0% -150px;
      color:#333;
      }
    #header li:hover a {
      background-position:100% -150px;
      }


    /* copied from tabs.css */
    .menuList li.selected ul.submenu {
        background: none;
        display: inline;
        left: -20px;
        position: absolute;
        top: 27px;
    }


    .menuList li.selected ul.submenu a {
        background: none !important;
        border-left: 1px solid #cccccc;
        color: #999999 !important;
        font-size: .98em;
        font-weight: bold;
        line-height: 12px;
        margin: 0 !important;
        text-decoration: none;
        padding-left: 15px !important;
        padding-right: 5px !important;
        width: auto !important;
    }


    .menuList li.selected ul.submenu a.selected {
        background: none;
        color: #333 !important;
    }


    .menuList li.selected ul.submenu a:hover {
        color: #333 !important;
    }


    .menuList ul.submenu {
        display: none;
        width: 90%;
    }


    .menuList li.selected ul.submenu li {
    background: none !important;
    border-bottom: 0 !important;
    white-space: nowrap;
    padding: 0;
    }

    6 tabs.css

    body {
        background: #ffffff;
        font-family: Verdana, Helvetica, Arial;
        font-size: 80%;
        margin: 10px;
        padding: 0px;
    }


    #content {
        background: #ffffff;
        border: 1px solid #cccccc;
        border-top: 0;
        clear: both;
        margin: 0px;
        padding: 15px;
    }


    /* IE doesn't read the padding from content */
    #content h2 {
        margin-top: 30px;
    }


    /* Override margin for Mozilla to set to default */
    body>#content h2 {
        margin-top: 15px;
    }


    .menuList {
        border-bottom: 1px solid #cccccc;
        margin: 0;
        padding-bottom: 19px;
        padding-left: 10px;
    }


    .menuList a:link, .menuList a:visited {
        background: #e8ebf0;
        border: 1px solid #cccccc;
        color: #666666;
        float: left;
        font-size: small;
        font-weight: normal;
        line-height: 14px;
        margin-right: 8px;
        padding: 2px 10px 2px 10px;
        text-decoration: none;
    }


    .menuList a:link.active, .menuList a:visited.active {
        background: #ffffff;
        border-bottom: 1px solid #ffffff;
        color: #000000;
    }


    .menuList a:hover {
        color: #ff0000;
    }


    .menuList li.selected a {
        background: #ffffff !important;
        border-bottom: 1px solid #ffffff !important;
        color: #000000 !important;
        font-weight: bold !important;
    }


    .menuList li.selected ul.submenu {
        display: inline;
        left: 10px;
        position: absolute;
        top: 35px;
    }


    .menuList li.selected ul.submenu a {
        background: #ffffff;
        border: none;
        border-left: 1px solid #cccccc;
        color: #999999 !important;
        font-size: .98em;
        font-weight: bold;
        line-height: 12px;
        margin-right: 4px;
        padding: 2px 10px 2px 10px;
        text-decoration: none;
    }


    .menuList li.selected ul.submenu a.selected {
        background: transparent;
        color: #000 !important;
    }


    .menuList ul a:hover, .menuList ul.submenu a:hover {
        color: #ff0000 !important;
    }


    .menuList ul, .menuList li {
        display: inline;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }


    .menuList ul.submenu {
        display: none;
        width: 90%;
    }



    7 xtree.css

    .webfx-tree-container {
    margin: 0px;
    padding: 0px;
    font: icon;
    white-space: nowrap;
    }


    .webfx-tree-item {
    padding: 0px;
    margin: 0px;
    font: icon;
    color: black;
    white-space: nowrap;
    }


    .webfx-tree-item a, .webfx-tree-item a:active, .webfx-tree-item a:hover {
    margin-left: 3px;
    padding: 1px 2px 1px 2px;
    }


    .webfx-tree-item a {
    color: black;
    text-decoration: none;
    }


    .webfx-tree-item a:hover {
    color: blue;
    text-decoration: underline;
    }


    .webfx-tree-item a:active {
    background: highlight;
    color: highlighttext;
    text-decoration: none;
    }


    .webfx-tree-item img {
    vertical-align: middle;
    border: 0px;
    }


    .webfx-tree-icon {
    width: 16px;
    height: 16px;
    }
    .webfx-tree-item a.selected {
    color: selectedtext;
    background: selected;
    }


    .webfx-tree-item a.selected-inactive {
    color: windowtext;
    background: buttonface;
    }








    展开全文
  • 在 Angular 中,我们可以在设置组件元数据时通过 styles 或 styleUrls 属性,来设置组件的内联样式和外联样式。 使用 styles 属性 import {Component, OnInit, Input, Output, EventEmitter} from '@angular...

    在 Angular 中,我们可以在设置组件元数据时通过 styles 或 styleUrls 属性,来设置组件的内联样式和外联样式。

    使用 styles 属性

    import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core'; 
    @Component({
      selector: 'app-simple-form',
      template: `
        ...
      `,
      styles: [`
       :host { margin: 10px; }
       
       input:focus { font-weight: bold;}
      ` ]
    }) export class SimpleFormComponent implements OnInit { 
     @Input() message: string; 
     @Output() update = new EventEmitter<{text: string}>();
    
      ngOnInit() {}
    }

    上面示例中 :host 表示选择宿主元素,即 AppComponent 组件模板中的 app-simple-form 元素。

    用过 AngularJS 1.x 的同学,对 ng-class 应该很熟悉,通过它我们能够根据条件,为元素动态的添加或移除对应的样式。在 Angular 中,对应的指令是 ngClass 。接下来我们来看一下,ngClass 指令的具体应用。

    使用 ngClass 指令

    ngClass 指令接收一个对象字面量,对象的 key 是 CSS class 的名称,value 的值是 truthy/falsy 的值,表示是否应用该样式。

    @Component({
      selector: 'app-simple-form',
      template: `
        <div>
         {{message}}
         <input #myInput 
          type="text" 
          [(ngModel)]="message"
          [ngClass]="{mousedown: isMousedown}"
          (mousedown)="isMousedown = true"
          (mouseup)="isMousedown = false"
          (mouseleave)="isMousedown = false"
          >
         <button (click)="update.emit({text: message})">更新</button>
        </div>
      `,
      styles: [`
       :host { margin: 10px; }
       
       .mousedown { border: 2px solid green; }
       
       input:focus { font-weight: bold; outline: none;}
      ` ]
    }) export class SimpleFormComponent implements OnInit {
      isMousedown: boolean; // ... }

    ngClass 指令用法

    <!-- 使用布尔值 --> 
    <div [ngClass]="{bordered: false}">This is never bordered</div> 
    <div [ngClass]="{bordered: true}">This is always bordered</div> 
    <!-- 使用组件实例的属性 --> 
    <div [ngClass]="{bordered: isBordered}"> Using object literal. Border {{ isBordered ? "ON" : "OFF" }} </div> 
    <!-- 样式名包含'-' --> 
    <div[ngClass]="{'bordered-box': false}"> Class names contains dashes must use single quote </div> 
    <!-- 使用样式列表 --> 
    <div class="base" [ngClass]="['blue', 'round']"> This will always have a blue background and round corners </div>

    除了 ngClass 指令外,Angular 还为我们提供了 ngStyle 指令。

    使用 ngStyle 指令

    ngStyle 指令让我们可以方便得通过 Angular 表达式,设置 DOM 元素的 CSS 属性。

    ngStyle 指令用法

    <div [ngStyle]="{color: 'white', 'background-color': 'blue'}"> Uses fixed white text on blue background </div>

    需要注意的是, background-color 需要使用单引号,而 color 不需要。这其中的原因是,ng-style 要求的参数是一个 Javascript 对象,color 是一个有效的 key,而 background-color 不是一个有效的 key ,所以需要添加 ''。

    对于一些场合,我们也可以直接利用 Angular 属性绑定的语法,来快速设置元素的样式。

    • 设置元素的背景颜色

    <div [style.background-color="'yellow'"]> Use fixed yellow background </div> 
    • 设置元素的字体大小

    <!-- 支持单位: px | em | %--> <div> <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSize"> Red Text <
    展开全文
  • styles(样式)抽取出控件的共同的属性  例如以下代码:    20dip  wrap_content  wrap_content  #ff0000    如何继承style呢?  第一种方式:    #0000ff
    styles(样式)抽取出控件的共同的属性
        例如以下代码:
             <style name="my_text_style">
            <item name="android:textSize">20dip</item>
            <item name="android:layout_width">wrap_content</item>
            <item name="android:layout_height">wrap_content</item>
            <item name="android:textColor">#ff0000</item>
                </style>
        如何继承style呢?
        第一种方式:
         <style name="my_text_style2" parent="@style/my_text_style">
            <item name="android:textColor">#0000ff</item>
            </style>
        第二种方式:
        <style name="my_text_style.my_text_style3">
            <item name="android:textColor">#00ff00</item>
            </style>
        第三种方式:

        在使用的时候,把想改变的属性给覆盖掉就行了。


    theme的应用

    1,创建主题
    在styles xml文件中生成,其实theme是一个特殊的style
     <!-- Application theme. -->
        <style name="AppTheme" parent="AppBaseTheme">
            <!-- All customizations that are NOT specific to a particular API-level can go here. -->
         
        </style>
        <style name="my_theme">
            <item name="android:background">#ff0000</item>
        </style>
    2,主题的应用
    在清单文件中的application中
    <application
            android:allowBackup="true"
            android:icon="@drawable/ic_launcher"
            android:label="@string/app_name"
            android:theme="@style/my_theme" >
    根据自己写的样式中application中的theme选择
    展开全文
  • React-Native之仿携程App首页布局

    万次阅读 2017-05-30 09:59:25
    转载请标明出处: ... 本文出自:【顾林海的博客】 前言本篇介绍React-Native中的View、Text和Image组件的使用,并利用这三个组件编写一个简单的菜单,如果大家看过《React Native入门实战》这本书的话,在这本书的第三...
  • Python Module_openpyxl_styles 样式处理

    万次阅读 2016-08-23 00:09:37
    Working with styles Styles can be applied to the following aspects Styles模块 Copying styles Basic Font Colors Applying Styles Edit Page Setup Edit Print Options Header Footer前言继续搞Python对Ex
  • 就会报以下的错误,是由于cell styles太多create造成,故一般可以把cellstyle设置放到循环外面 报错如下: Caused by: java.lang.IllegalStateException: The maximum number of cell styles was ex
  • Styles.Render(用法)

    千次阅读 2016-04-24 17:13:27
    参照: http://blog.csdn.net/zjlovety/article/details/8961574
  • Qt Quick控件风格
  • Andorid Studio有时打开布局文件时,手机预览界面会提示Missing Styles.Is the correct theme chosen for this layout?的错误,解决方式其实很简单,原因是手机界面预览默认使用了最新的Android预览版本,去除默认...
  • 导出 Excel数据多报错:java.lang.IllegalStateException: The maximum number of cell styles was exceeded. You can define up to 4000 styles in a .xls workbook  代码创建的cellSyle太多...
  • Eclipse 创建Android工程出现错误 例如:res\values\styles.xml:7: error: Error retrieving parent for item: No resource found that matches the given name 'Theme.AppCompat.Light'. res\values-v11\styles....
  •  POI导出execl时在本地测试没有异常,在发布到正式环境后报上面的异常,原因是在for循环里创建了 HSSFCellStyle style = wwb.createCellStyle()对象,所有当导出数据很多时就会报上面的异常, ...
  • android 程序中res/values-v14/styles.xml报错: error: Error retrieving parent for item: No resource found that matches the given name :Theme.AppCompat.Light.DarkActionBar 解决办法:修改项目下
  • react-native-swiper 让人无语的坑

    千次阅读 2017-12-08 19:05:59
    下面这段代码出现问题,百思不得其解, 刚开始以为是swiper不支持数组形式,一顿测试<Swiper style={styles.wrapper} showsButtons> { [<View style={styles.slide1}> <Text style={styles.t
  • ERROR in ./src/styles/Scrollbars.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--6-2!./node_modules/sass-loader/lib/loader.js!./src/styles/Scrollbars.scss) Module ....
  • Android styles.xml文件属性笔记

    万次阅读 2018-05-18 14:35:57
    关于启动背景和透明状态栏&lt;resources&gt; &lt;!-- Base application theme. --&gt; &lt;style name="AppTheme" parent="...-- Customize your theme here.......
  • androidstudio的Rendering Problems Missing styles错误解决

    万次阅读 多人点赞 2016-04-08 12:14:57
    Rendering Problems Missing styles. Is the correct theme chosen for this layout? Use the Theme combo box above the layout to choose a different layout, or fix the theme style references. Failed to fi
  • React Native 之 TextInput使用

    千次阅读 2016-11-04 11:32:40
    前言 ...本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢 文章第一版出自简书,如果出现图片或页面显示问题,...
  • [](https://studiostyl.es/schemes/selenitic "") 如果这个真的不能下载的话,还有什么其他地方可以下载主题?
1 2 3 4 5 ... 20
收藏数 117,533
精华内容 47,013
关键字:

styles